アラートの書式：Bootstrapコードまとめ

アラートの作成

全体をdiv要素で囲み、class「alert」と色指定のclassを適用します。
以下の表のclassで色を指定します。

HTML

<div class="alert alert-danger">メールアドレスは必ず半角文字で入力してください。</div>
<div class="alert alert-info">
  <b>2016.3.17</b>　記入項目に住所欄を追加しました。<br>
  <b>2016.1.25</b>　個人情報保護規約を更新しました。<br>
</div>

ブラウザでの表示

アラートを閉じる機能を追加

div要素にclass「alert-dismissible」を追加すると、アラートを閉じて非表示にする機能が加わります。

×文字をbutton要素で囲み、class「close」を指定します。
×は特殊文字で記述します。

JavaScriptを動作させるためbutton要素に属性「data-dismiss=”alert”」を指定します。

HTML

<div class="alert alert-info alert-dismissible">
  <button class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
  <b>2016.1.25</b>　個人情報保護規約を更新しました。
</div>

ブラウザでの表示

アラート内にリンクを貼る

a要素にclass「alert-link」を適用するとリンク文字を太字で表示できます。

HTML

<div class="alert alert-info alert-dismissible">
  <button class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
  <a href="#" class="alert-link">行橋本店</a>にて発売開始です。
</div>

ブラウザでの表示