Bootstrap は、定義済みアラートメッセージを作成する簡単な方法を提供します:
アラートは、4 つのコンテキストクラス、.alert-success
、.alert-info
、
.alert-warning
。.alert-danger
の内の何れか 1 つが後に続く、.alert
クラスを使用して作成します:
<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>
Try it Yourself »
アラートメッセージを閉じるには、リンクまたはボタンの要素に 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>
Try it Yourself »
aria-* 属性 と × の説明
スクリーンリーダーを使っている人のアクセシビリティを改善するためには、閉じるボタンを作成するときに
aria-label="close" 属性を含める必要があります。
× (×) は、閉じボタンとして、文字 "x" よりも好まれる HTML エンティティです。
.fade
と .in
クラスは、アラートメッセージを閉じるときにフェード効果を加えます:
Exercise 1 » Exercise 2 » Exercise 3 »
すべての alert オプションの完全なリファレンスは、 Bootstrap JS アラートリファレンスをご覧ください。