アラート

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 クラスを追加して、「マッチするカラーリンク」を作成します。

Success! こちらを読んでください。

Info! こちらを読んでください。

Warning! こちらを読んでください。

Danger! こちらを読んでください。

<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-*属性と×
スクリーンリーダーを使用するユーザーのアクセシビリティを向上させるには、閉じるボタンを作成するときに aria-label="close" 属性を含める必要があります。
×（×）は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>