부트스트랩 4 경고
부트스트랩 4 경고
Bootstrap 4는 미리 정의된 경고 메시지를 생성하는 쉬운 방법을 제공합니다.
성공! 이 경고 상자는 성공 또는 긍정적인 작업을 나타냅니다.
정보! 이 경고 상자는 중립적인 정보 변경 또는 조치를 나타냅니다.
경고! 이 경고 상자는 주의가 필요할 수 있는 경고를 나타냅니다.
위험! 이 경고 상자는 위험하거나 잠재적으로 부정적인 작업을 나타냅니다.
주요한! 이 경고 상자는 중요한 작업을 나타냅니다.
중고등 학년! 이 경고 상자는 덜 중요한 작업을 나타냅니다.
어두운! 짙은 회색 경고 상자.
빛! 밝은 회색 경고 상자.
경고는 클래스와 함께 생성되고 .alert컨텍스트 클래스 .alert-success, .alert-info, .alert-warning,
.alert-danger, .alert-primary, 또는 다음 중 하나가 옵니다 .alert-secondary..alert-light.alert-dark
예시
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
경고 링크
alert-link경고 상자 안의 모든 링크에 클래스를 추가하여 "일치하는 색상 링크"를 만듭니다.
성공! 이 메시지 를 읽어야 합니다 .
정보! 이 메시지 를 읽어야 합니다 .
경고! 이 메시지 를 읽어야 합니다 .
위험! 이 메시지 를 읽어야 합니다 .
주요한! 이 메시지 를 읽어야 합니다 .
중고등 학년! 이 메시지 를 읽어야 합니다 .
어두운! 이 메시지 를 읽어야 합니다 .
빛! 이 메시지 를 읽어야 합니다 .
예시
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
닫기 알림
×
나를 닫으려면 오른쪽에 있는 "x" 기호를 클릭하십시오.
경고 메시지를 닫으려면 .alert-dismissible
경고 컨테이너에 클래스를 추가합니다. 그런 다음 링크 또는 버튼 요소에 및를 추가 class="close"합니다 data-dismiss="alert"
(이를 클릭하면 경고 상자가 사라짐).
예시
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
팁: × (×)는 문자 "x"가 아닌 닫기 버튼에 선호되는 아이콘인 HTML 엔티티입니다.
모든 HTML 엔터티 목록을 보려면 HTML 엔터티 참조 를 방문하십시오 .
애니메이션 경고
×
나를 닫으려면 오른쪽에 있는 "x" 기호를 클릭하십시오. 나는 "페이드 아웃"할 것입니다.
.fade및 클래스 는 .show경고 메시지를 닫을 때 페이딩 효과를 추가합니다.
예시
<div class="alert alert-danger
alert-dismissible fade show">
전체 부트스트랩 4 경고 참조
모든 경고 옵션, 방법 및 이벤트에 대한 전체 참조를 보려면 Bootstrap 4 JS 경고 참조 로 이동 하십시오.