通常のWebサイトではあまり使うことはないかもしれませんが、アプリなんかを作ってると必ず必要なのがLabelやBadgeコンポーネント。
メニューのカテゴリーやグループを表示したり、通知アイコンと一緒に使ったり用途は様々。使い方もclass追加するだけなのですごく簡単に作ることができます。
Bootstrap3のLabelの使い方
Labelで使えるclass
spanタグにclassを追加するだけで使えるラベルコンポーネントです。新着商品や新着記事、カテゴリーラベルなんかでよく使われます。
| Class名 | 概要 |
|---|---|
label label-default |
黒色のラベルを表示 |
label label-primary |
青色のラベルを表示 |
label label-success |
緑色のラベルを表示 |
label label-info |
水色のラベルを表示 |
label label-warning |
黄色のラベルを表示 |
label label-danger |
赤色のラベルを表示 |
<!-- 通常のLabel -->
<span class="label label-default">Default</span>
<!-- Headlineで使用した場合 -->
<h3>Hタグの見出し <span class="label label-default">新着</span></h3>
Badgeの使い方
Badgeで使えるclass
こちらは新着のお知らせなど、通知目的で使われることが多いバッジコンポーネント。ラベル同様spanタグにつけるだけで使えます。ラベルと異なり、カラー設定はありません。
| Class名 | 概要 |
|---|---|
.badge |
バッジを表示 |
<!-- リンクと一緒に使う -->
<a href="#">Inbox <span class="badge">42</span></a>
<!-- ボタンと使う -->
<button class="btn btn-primary" type="button">
新着情報 <span class="badge">4</span>
</button>
