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

Tweet

Pocket

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

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

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

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

<!-- 通常の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。

<!-- 閉じるボタンは固定 -->
<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のように閉じるボタンが使えないというところ。

<!-- Wellsコンポーネント -->
<div class="well">
  Wellsコンポーネント。
</div>

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

デモページはこちら