Alert（アラート）

Alert

アラートは状況に応じたメッセージや、期間限定のお知らせなど、補助的なコンテンツに注目させる要素として利用できます。以下のように、.alert とともに、目的に応じたクラスをセットで指定します。

<div class="alert alert-primary">
  alert-primary のアラート表示例です
</div>
<div class="alert alert-secondary">
  alert-secondary のアラート表示例です
</div>
<div class="alert alert-success">
  alert-success のアラート表示例です
</div>
<div class="alert alert-danger">
  alert-danger のアラート表示例です
</div>
<div class="alert alert-warning">
  alert-warning のアラート表示例です
</div>
<div class="alert alert-info">
  alert-info のアラート表示例です
</div>
<div class="alert alert-light">
  alert-light のアラート表示例です
</div>
<div class="alert alert-dark">
  alert-dark のアラート表示例です
</div>

アラート内コンテンツの補助装飾

アラート要素内には任意のコンテンツを記述できます。色などは選択した種類に合わせて調整されますが、見出しとリンク要素向けに .alert-heading と .alert-link クラスが設定されています。

<div class="alert alert-info">
  <h4 class="alert-heading">改装のお知らせ</h4>
  <p>来月、リニューアルのための改装工事を行ないます。スケジュールなどについては、<a href="#" class="alert-link">詳細情報</a>を参照してください。</p>
</div>

これらの装飾クラスを利用すると、明示的にアラートの色に合わせる挙動になります。

クローズ可能なアラート

以下のように追加クラスの指定により、クローズ可能なアラートになります。内容を確認のうえ、読者が非表示にするページを作成したい場合に使えます。

<div class="alert alert-warning alert-dismissible fade show">
  このアラートはボタン操作で閉じられます。
  <button class="btn-close" data-dismiss="alert"></button>
</div>