目次
アラート
alert
警告メッセージなどアラート用に使うクラスです。.alert ＋ .alert-success等のクラスを利用してカラー変更が可能になります。
alert-success 成功系メッセージ
alert-info お知らせ系メッセージ
alert-warning 警告系メッセージ
alert-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
オプション .alert-dismissible でアラートに閉じるボタンを追加することができます。
Warning! このメッセージは右側ので閉じることができます。
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> ここにメッセージを書きます。
</div>アラート内のリンク
alert-link
アラート内に .alert-link クラスでリンクを貼ることができます。
alert-success 成功系メッセージ リンクはこちら
alert-info お知らせ系メッセージ リンクはこちら
alert-warning 警告系メッセージ リンクはこちら
alert-danger エラー、重要系メッセージ リンクはこちら
<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>