何種類かの柔軟な通知・警告メッセージ用の要素を使用して、ユーザーの一般的な操作に対してのフィードバックメッセージを提供します。

• 例
• 閉じることが可能な通知・警告
• 通知・警告内のリンク

例

基本的な通知・警告メッセージを表示するために、 テキスト(と任意でメッセージを取り去るボタン)を.alertと、4つの文脈(contextual)クラス(例えば、.alertt-success)のうちの1つで囲みます。

デフォルトのクラスはありません
通知・警告はデフォルトのクラスを持たず、ベースとなるクラスのみがあり、それに修飾クラスを追加することが前提になります。 .alertのみの通知・警告は特別な意味を持たないようにしているため、 文脈クラスを追加して、それを指定する必要があります。 success、info、warning、dangerのいずれかを選択してください。

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

閉じることが可能な通知・警告

.alert-dismissibleと閉じるボタンを加えて、通知・警告を作ります。

JavaScriptのalertプラグインが必要
閉じるための機能を実装するには、alertのJavaScriptプラグインを使用しなければいけません。

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

全てのデバイスで正しい挙動を保証すること
data-dismiss="alert"のdata属性付きの<button>要素を使用するようにしてください。

通知・警告内のリンク

.alert-link汎用クラスを使用すると、通知・警告内のリンク色をそれに合うものにしてくれます。

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

 Back to top