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>