バッジ　　Badges

---

リンク、ボタン、ナビゲーションなどに追加する、新規や未読の項目数を、ハイライト表示するスタイル。

---

使い方

ポイントは３つ。

1. class属性にbadgeを指定したspan要素で、項目数を括る。
2. １のspan要素を、a要素やbutton要素内に配置する。
3. 項目数が0の場合、span要素内を空にすれば、何も表示しない。ただし、Internet Explorer 8 以下のブラウザでは表示されてしまう。

<a href="#">リンク <span class="badge">26</span></a>
<button class="btn btn-default" type="button">ボタン <span class="badge">26</span></button>

基本

span要素内を空の場合、何も表示しない。ただし、Internet Explorer 8 以下のブラウザでは表示されてしまう。

表示サンプル

26

ソースコード

<span class="badge">26</span>
<span class="badge"></span>

a要素内に配置

表示サンプル

リンク 26

ソースコード

<a href="#">リンク <span class="badge">26</span></a>

button要素内に配置

表示サンプル

default 26 primary 26 success 26 info 26 warning 26 danger 26

ソースコード

<button class="btn btn-default" type="button">default <span class="badge">26</span></button>
<button class="btn btn-primary" type="button">primary <span class="badge">26</span></button>
<button class="btn btn-success" type="button">success <span class="badge">26</span></button>
<button class="btn btn-info" type="button">info <span class="badge">26</span></button>
<button class="btn btn-warning" type="button">warning <span class="badge">26</span></button>
<button class="btn btn-danger" type="button">danger <span class="badge">26</span></button>

ボタン・グループ内に配置

表示サンプル

ソースコード

<div class="btn-group" role="group">
	<button type="button" class="btn btn-default">左</button>
	<button type="button" class="btn btn-default">中央 <span class="badge">26</span></button>
	<button type="button" class="btn btn-default">右</button>
</div>

タブ・メニュー内に配置

表示サンプル

• ホーム
• メニューＡ 26
• メニューＢ 7

ソースコード

<ul class="nav nav-tabs">
	<li role="presentation"><a href="#">ホーム</a></li>
	<li role="presentation" class="active"><a href="#">メニューＡ <span class="badge">26</span></a></li>
	<li role="presentation"><a href="#">メニューＢ <span class="badge">7</span></a></a></li>
</ul>

カプセル・メニュー内に配置

表示サンプル

• ホーム
• メニューＡ 26
• メニューＢ 7

ソースコード

<ul class="nav nav-pills">
	<li role="presentation"><a href="#">ホーム</a></li>
	<li role="presentation" class="active"><a href="#">メニューＡ <span class="badge">26</span></a></li>
	<li role="presentation"><a href="#">メニューＢ <span class="badge">7</span></a></a></li>
</ul>

ナビゲーション・バー内に配置

表示サンプル

ソースコード

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarEexample1">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">タイトル</a>
		</div>
		
		<div class="collapse navbar-collapse" id="navbarEexample1">
			<ul class="nav navbar-nav">
				<li><a href="#">メニューＡ</a></li>
				<li class="active"><a href="#">メニューＢ <span class="badge">26</span></a></li>
				<li><a href="#">メニューＣ <span class="badge">7</span></a></li>
			</ul>
		</div>
	</div>
</nav>