スタッフによるブログです。WEBデザイン全般、IT関連、業務関連情報など。

  • 〒800-0222
  • 北九州市小倉南区中曽根4-16-2
  • TEL : 093-967-1128

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



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

Bootstrapのコードを少しずつまとめていきます。
今回はアラートの書式です。

アラートの作成

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

class
alert-success 緑系
alert-info 薄い青系
alert-warning 黄系
alert-danger 薄い赤系

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>

ブラウザでの表示

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