アラート Alerts

---

アラート・メッセージに最適なコンポーネント。

---

使い方

ポイントは4つ。

• 成功しました系メッセージの場合、class属性にalert alert-successを指定したdiv要素で、成功しました系メッセージを括る。
• お知らせ系メッセージの場合、class属性にalert alert-infoを指定したdiv要素で、お知らせ系メッセージを括る。
• 警告系メッセージの場合、class属性にalert alert-warningを指定したdiv要素で、警告系メッセージを括る。
• 最重要メッセージの場合、class属性にalert alert-dangerを指定したdiv要素で、最重要メッセージを括る。

<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>

基本

表示サンプル

ソースコード

<div class="alert alert-success" role="alert"><strong>success</strong>: 成功しました系メッセージ。</div>
<div class="alert alert-info" role="alert"><strong>info</strong>: お知らせ系メッセージ。</div>
<div class="alert alert-warning" role="alert"><strong>warning</strong>: 警告系メッセージ。</div>
<div class="alert alert-danger" role="alert"><strong>danger</strong>: 最重要メッセージ。</div>

閉じることができるアラート

• class属性にalertを指定したdiv要素に、alert-dismissibleを追加する。
• class属性にclose、data-dismiss属性にalertを指定したbutton要素を、アラート内に配置する。
• 閉じる機能には、alert.jsが必要であるが、通常、「Bootstrap」に含まれている。

表示サンプル

ソースコード

<div class="alert alert-warning alert-dismissible" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="閉じる"><span aria-hidden="true">×</span></button>
	<strong>warning</strong>: このメッセージは閉じることができます。
</div>

アラート内のリンク

アラート内のa要素は、class属性にalert-linkを指定する。これにより、アラートとリンクの色を揃えることができる。

表示サンプル

ソースコード

<div class="alert alert-success" role="alert"><strong>success</strong>: 成功しました系メッセージ。<a href="#" class="alert-link">リンク</a>。</div>
<div class="alert alert-info" role="alert"><strong>info</strong>: お知らせ系メッセージ。<a href="#" class="alert-link">リンク</a>。</div>
<div class="alert alert-warning" role="alert"><strong>warning</strong>: 警告系メッセージ。<a href="#" class="alert-link">リンク</a>。</div>
<div class="alert alert-danger" role="alert"><strong>danger</strong>: 最重要メッセージ。<a href="#" class="alert-link">リンク</a>。</div>