부트스트랩 경고
경고
부트스트랩은 미리 정의된 경고 메시지를 생성하는 쉬운 방법을 제공합니다:
×
성공! 이 경고 상자는 성공 또는 긍정적인 작업을 나타냅니다.
×
정보! 이 경고 상자는 중립적인 정보 변경 또는 조치를 나타냅니다.
×
경고! 이 경고 상자는 주의가 필요할 수 있는 경고를 나타냅니다.
×
위험! 이 경고 상자는 위험하거나 잠재적으로 부정적인 작업을 나타냅니다.
경고는 클래스와 함께 생성되고 .alert그 뒤에 4개의 컨텍스트 클래스 , 또는 다음 중 하나 .alert-success가 생성
됩니다 .alert-info..alert-warning.alert-danger
예시
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Indicates a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Indicates a dangerous or potentially negative 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">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
aria-* 속성 및 × 설명
스크린 리더를 사용하는 사람들의 접근성을 높이려면 닫기 버튼을 만들 때 aria-label="close" 속성을 포함해야 합니다.
&타임스; (×)는 문자 "x"가 아닌 닫기 버튼에 선호되는 아이콘인 HTML 엔티티입니다.
모든 HTML 엔터티 목록을 보려면 HTML 엔터티 참조 를 방문하십시오 .
애니메이션 경고
×
나를 닫으려면 오른쪽에 있는 "x" 기호를 클릭하십시오. 나는 "페이드 아웃"할 것입니다.
.fade및 클래스 는 .in경고 메시지를 닫을 때 페이딩 효과를 추가합니다.
예시
<div class="alert alert-danger fade in">
전체 부트스트랩 경고 참조
모든 경고 옵션, 방법 및 이벤트에 대한 전체 참조를 보려면 Bootstrap JS 경고 참조 로 이동하십시오 .