「Bootstrap ComponentsのAlerts」のサンプル
「BootstrapのComponentsのサンプル：和訳」の「Alerts」のサンプルページです。
- classを「alert alert-○○○」にする。
基本のアラート（色つき枠）
alert-success：Well done!
You successfully read this important alert message.
You successfully read this important alert message.
alert-info：Heads up!
This alert needs your attention, but it's not super important.
This alert needs your attention, but it's not super important.
alert-warning：Warning!
Better check yourself, you're not looking too good.
Better check yourself, you're not looking too good.
alert-danger：Oh snap!
Change a few things up and try submitting again.
Change a few things up and try submitting again.
実際のソース
<div class="alert alert-success">
alert-success：<strong>Well done!</strong><br />
You successfully read this important alert message.
</div>
<div class="alert alert-info">
alert-info：<strong>Heads up!</strong><br />
This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning">
alert-warning：<strong>Warning!</strong><br />
Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger">
alert-danger：<strong>Oh snap!</strong><br />
Change a few things up and try submitting again.
</div>アラート内でリンク
aタグに「.alert-link」を追加。
実際のソース
<div class="alert alert-success">
alert-success：<br />
<a href="#" class="alert-link bootstrap">alert-linkあり。</a>
<a href="#" class="bootstrap">alert-linkなし。</a>
</div>
<div class="alert alert-info">
alert-info：<br />
<a href="#" class="alert-link bootstrap">alert-linkあり。</a>
<a href="#" class="bootstrap">alert-linkなし。</a>
</div>
<div class="alert alert-warning">
alert-warning：<br />
<a href="#" class="alert-link bootstrap">alert-linkあり。</a>
<a href="#" class="bootstrap">alert-linkなし。</a>
</div>
<div class="alert alert-danger">
alert-danger：<br />
<a href="#" class="alert-link bootstrap">alert-linkあり。</a>
<a href="#" class="bootstrap">alert-linkなし。</a>
</div>※クラス「bootstrap」は不要です（このサイトで使っているCSSで「a.btn」をすでに設定しているためbootstrap.cssと競合。その回避用につくったクラスです）
閉じるボタン付き
class「alert alert-○○○」に「alert-dismissible」を追加。
buttonタグに「data-dismiss="alert"」は必要みたい。
※BootstrapのJavascriptファイル必要。
Warning! Better check yourself, you're not looking too good.
実際のソース
<div class="alert alert-warning alert-dismissible">
<button type="button" class="close" data-dismiss="alert"><span>×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>