アラート

alert

Bootstrapを使うと、あらかじめ定義された警告メッセージを簡単に作成できます。

Success! 成功または正のアクションを示します。
Info! 中立的な情報の変更や行動を示します。
Warning! 注意が必要な警告を示します。
Danger! 危険なまたは潜在的に否定的な行動を示します。
<div class="alert alert-success">
  <strong>Success!</strong> 成功または正のアクションを示します。
</div>
<div class="alert alert-info">
  <strong>Info!</strong> 中立的な情報の変更や行動を示します。
</div>
<div class="alert alert-warning">
  <strong>Warning!</strong> 注意が必要な警告を示します。
</div>
<div class="alert alert-danger">
  <strong>Danger!</strong> 危険なまたは潜在的に否定的な行動を示します。
</div>

アラートリンク

アラートボックス内のリンクに .alert-link クラスを追加して、「マッチするカラーリンク」を作成します。

<div class="alert alert-success">
  <strong>Success!</strong> <a href="#" class="alert-link">こちらを読んでください。</a>
</div>
<div class="alert alert-info">
  <strong>Info!</strong> <a href="#" class="alert-link">こちらを読んでください。</a>
</div>
<div class="alert alert-warning">
  <strong>Warning!</strong> <a href="#" class="alert-link">こちらを読んでください。</a>
</div>
<div class="alert alert-danger">
  <strong>Danger!</strong> <a href="#" class="alert-link">こちらを読んでください。</a>
</div>

アラートを閉じる

アラートメッセージを閉じるには、アラートコンテナに .alert-dismissable クラスを追加します。
次に、 class="close"data-dismiss="alert" をリンクまたはボタン要素に追加します(これをクリックすると警告ボックスは消えます)。

× Success!
<div class="alert alert-success alert-dismissable">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong>
</div>

aria-*属性と&times;
スクリーンリーダーを使用するユーザーのアクセシビリティを向上させるには、閉じるボタンを作成するときに aria-label="close" 属性を含める必要があります。
&times;(×)はHTMLエンティティで、文字「x」ではなく、閉じるボタンのアイコンです。

アニメーション

アラートメッセージを閉じるときにアニメーションを追加します。
.fade.in のクラスは、警告メッセージを閉じるときにフェード効果を追加します

× Success!
× Info!
× Warning!
× Danger!
<div class="alert alert-success alert-dismissable fade in">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong>
</div>
<div class="alert alert-info alert-dismissable fade in">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Info!</strong>
</div>
<div class="alert alert-warning alert-dismissable fade in">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Warning!</strong>
</div>
<div class="alert alert-danger alert-dismissable fade in">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Danger!</strong>
</div>