アラート
Bootstrapあらかじめ定義された警告メッセージを作成する簡単な方法を提供します。
× 成功! この警告ボックスは、成功したか、積極的な行動を示しています。
× 情報! この警告ボックスは、中性有益な変更またはアクションを示しています。
× 警告! このアラートボックスには、注意が必要な場合があります警告を示しています。
× 危険! この警告ボックスは危険または潜在的に負の作用を示しています。
アラートがで作成され.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>
»それを自分で試してみてください 閉会アラート
、警告メッセージを閉じる追加するには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アラートリファレンス 。