Bootstrap3 AlertとWellsコンポーネントの使い方

Pocket

AlertとWellsはブログなどでBootstrap3を使っている場合はそんなに見かけることがないコンポーネントですが、Webアプリやフォームを使うようなサイトだと必ずと言っていいほど使用されている便利なコンポーネントです。

Alertは閉じるボタンも使えるので設定を保存が完了した際のお知らせや、通知なんかにも使えますね。使い方は簡単なので積極的に使っていきたいコンポーネントです。

Bootstrap3 Alertコンポーネントの使い方

使い方はdiv要素に.alertと色を指定するclassを一緒に入れるだけです。

Class名 概要
.alert Jumbotronコンポーネントの表示
.alert.alert-success 緑色のアラートを表示
.alert.alert-info 青色のアラートを表示
.alert.alert-warning 黄色のアラートを表示
.alert.alert-danger 赤色のアラートを表示
.alert .alert-link アラート内にリンクを設置
<!-- 通常のAlert -->
<div class="alert alert-success" role="alert">Success!</div>
<div class="alert alert-info" role="alert">Information</div>
<div class="alert alert-warning" role="alert">Warning!</div>
<div class="alert alert-danger" role="alert">Dager!</div>

<!-- Alertにリンクを追加 -->
<div class="alert alert-success" role="alert">
  通常のテキストと、<a href="#" class="alert-link">アラートのリンク</a>
</div>

Alertに閉じるボタンを追加する方法

Alertに閉じるボタンを追加するにはBootstrap3のJavascriptを読み込んでおく必要があります。その上で.alert-dismissibleを追加し、閉じる用のボタンをコンポーネント内に入れればOK。

Class名 概要
.alert.alert-dismissible 閉じることができるアラートにする
<!-- 閉じるボタンは固定 -->
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>

<!-- Alertに閉じるボタンを追加 -->
<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
  通常のテキストと、<a href="#" class="alert-link">アラートのリンク</a>
</div>

デモページはこちら

Wellsの使い方

WellsはAlertのデフォルトスタイルのような使い方ができます。注意点はAlertのように閉じるボタンが使えないというところ。

Class名 概要
.well Wellsコンポーネントを作成
.well.well-lg 幅を広くする
.well.well-sm 幅を狭くする
<!-- Wellsコンポーネント -->
<div class="well">
  Wellsコンポーネント。
</div>

<!-- 大きいサイズ -->
<div class="well well-lg">
  Wellsコンポーネントの大きいサイズ。
</div>

デモページはこちら