ラベルとバッジとアラート

ラベルをつけるなら
<p>
<span class=”label”>Note</span> Message
</p>
というようにする
また、このラベルには種類があり
label-warning にするとオレンジ色
label-info にすると水色になる
次にバッジ
スマホのメールの未読数字のように表示される
やり方は
<span class=”badge”>5</span>
というようにする
ちなみに、これも色を変えることができる
<span class=”badge badge-important”>5</span>
とすれば赤い色になる
ラベルとバッジに関しては
http://twitter.github.io/bootstrap/components.html#labels-badges
を参考にする
次はアラート
<div class=”alert”>
Message
</div>
とすることで、
Message というアラートができる
このアラートも
http://twitter.github.io/bootstrap/components.html#alerts
に詳しい解説が載っている
<div class=”alert alert-success”>
とすれば、アラートの背景色が緑になる
また、アラートとボタンの組み合わせもできる
<button type=”button” class=”close” data-dismiss=”alert”>×</button>
とすれば
アラートのところにxの消すボタンができるので
これを押せば、アラートが消える
あと、視覚効果でフワッと消すなら
<div class=”alert alert-success fade in”>
とすれば
ボタンと組み合わせることでふわっと消える

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です