Bootstrap3 LabelとBadgeの使い方

Tweet

Pocket

通常のWebサイトではあまり使うことはないかもしれませんが、アプリなんかを作ってると必ず必要なのがLabelやBadgeコンポーネント。

メニューのカテゴリーやグループを表示したり、通知アイコンと一緒に使ったり用途は様々。使い方もclass追加するだけなのですごく簡単に作ることができます。

Bootstrap3のLabelの使い方

Labelで使えるclass

spanタグにclassを追加するだけで使えるラベルコンポーネントです。新着商品や新着記事、カテゴリーラベルなんかでよく使われます。

<!-- 通常のLabel -->
<span class="label label-default">Default</span>

<!-- Headlineで使用した場合 -->
<h3>Hタグの見出し <span class="label label-default">新着</span></h3>

Badgeの使い方

Badgeで使えるclass

こちらは新着のお知らせなど、通知目的で使われることが多いバッジコンポーネント。ラベル同様spanタグにつけるだけで使えます。ラベルと異なり、カラー設定はありません。

<!-- リンクと一緒に使う -->
<a href="#">Inbox <span class="badge">42</span></a>

<!-- ボタンと使う -->
<button class="btn btn-primary" type="button">
  新着情報 <span class="badge">4</span>
</button>

デモページはこちら