경고
Bootstrap 미리 정의 된 경고 메시지를 만들 수있는 쉬운 방법을 제공합니다 :
× 성공! 이 경고 상자가 성공 또는 긍정적 인 조치를 나타냅니다.
× 정보! 이 경고 상자가 중립적 인 정보를 변경 또는 조치를 나타냅니다.
× 경고! 이 경고 상자가주의를해야 할 수도 있습니다 경고를 나타냅니다.
× 위험! 이 경고 상자가 위험하거나 잠재적으로 부정적인 행동을 나타냅니다.
경고가 만들어집니다 .alert 네 가지 상황에 맞는 클래스 중 하나 다음에, 클래스 .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>
»그것을 자신을 시도 폐쇄 경고
추가, 경고 메시지를 닫으려면 class="close" 와 data-dismiss="alert" 링크 나 버튼 요소 :
예
<div class="alert alert-success">
<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" 닫기 버튼을 만들 때 속성을.
× (×) × (×) 오히려 편지 쓰기보다, 닫기 버튼위한 기본 아이콘 인 HTML 엔티티 "x" .
애니메이션 경고
.fade 및 .in 경고 메시지를 닫을 때 클래스는 페이딩 효과를 추가합니다 :
연습으로 자신을 테스트!
완료 Bootstrap 경고 참조
모든 경고 옵션, 방법 및 이벤트의 완전한 참고로, 우리로 이동 Bootstrap JS 경고 참조 .