twitter-bootstrap
경보
수색…
비고
경고 유형
같은 다른 부트 스트랩 구성 요소와 달리 버튼 의 경고는 와 함께하지 않는 default
또는 primary
들이 특정 방식으로 사용자에게 경고하기위한 것입니다 때문에, 스타일.
<div class="alert alert-success" role="alert">
Some action was completed successfully
</div>
<div class="alert alert-info" role="alert">
Here is some information. Just FYI.
</div>
<div class="alert alert-warning" role="alert">
Careful! You're about to do something dangerous.
</div>
<div class="alert alert-danger" role="alert">
An error (or something dangerous) happened!
</div>
기본 예제 경고
<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success">
<strong>Success!</strong>
</div>
<div class="alert alert-info">
<strong>Info!</strong>
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> All foelds are required
</div>
<div class="alert alert-danger">
The username is required and can't be empty
</div>
</div>
애니메이션 경고
.fade
및 .in
클래스는 경고 메시지를 닫을 때 페이드 효과를 추가합니다.
<div class="alert alert-success fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> This is a good example!
</div>
무시할 수있는 경고
알림 닫기 기능을 제공하려면 닫기 버튼에 data-dismiss="alert"
을 추가하면 data-dismiss="alert"
.
<div class="alert alert-info alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Sphinx of black quartz, judge my vow
</div>
.alert-dismissible
및 .close
클래스는 선택 사항이며 스타일 지정에만 유용합니다.
경고의 색상 연결
모든 경고 내의 링크에 대해 일치하는 색상을 빠르게 제공하려면 .alert-link
유틸리티 클래스를 사용할 수 있습니다.
<div class="alert alert-success">
You have won! Click <a href="#" class="alert-link">here</a> to claim your prize ...
</div>
<div class="alert alert-info">
You might want to check <a href="#" class="alert-link">this</a> instead.
</div>
<div class="alert alert-warning">
You are running out of coins. Buy more <a href="#" class="alert-link">here</a>.
</div>
<div class="alert alert-danger">
Something went wrong. You can try <a href="#" class="alert-link">again</a> or ...
</div>
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow