2017/02/26  Bootstrap 

アラート

警告メッセージなどアラート用に使うクラスです。.alert.alert-success等のクラスを利用してカラー変更が可能になります。

<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.js が必要ですが通常Bootstrapに含まれています。

<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> ここにメッセージを書きます。
</div>

アラート内に .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>