Bootstrap3 LabelとBadgeの使い方

Pocket

通常の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>

デモページはこちら