Bootstrap 徽章（Badges）
この章では、Bootstrapバッジ（Badges）について説明します。バッジはラベルと似ていますが、主な違いはバッジの角がより丸みを帯びていることです。
バッジ（Badges）は主に、新しい項目や未読の項目を強調表示するために使用されます。バッジを使用するには、単に<span class="badge">をリンクやBootstrapナビゲーションなどの要素に追加するだけです。
以下の例はこれを示しています：
結果は次のとおりです：
新しい項目や未読の項目がない場合は、CSSの :emptyセレクターによって、バッジは折りたたまれ、内部にコンテンツがないことを示します。
实例
未読メッセージを表示：
<div class="container">
<h2>徽章</h2>
<p>.badge クラスは未読メッセージの数を指定します:</p>
<p><a href="#">收件箱<span class="badge">21</span></a></p>
</div>
尝试一下 »
ナビゲーション状態をアクティブにする
アクティブ状態のピル型ナビゲーションやリストナビゲーションにバッジを配置できます。使用することにより、<span class="badge">リンクをアクティブにするには、次の例のようにします：
实例
<h4>カプセル式ナビゲーションのアクティブ状態</h4>
<ul class="nav nav-pills">
<li class="active">
<a href="#">首页<span class="badge">42</span>
</a>
</li>
<li>
<a href="#">简介</a>
</li>
<li>
<a href="#">消息<span class="badge">3</span>
</a>
</li>
</ul>
<br>
<h4>リストナビゲーション内のアクティブ状態</h4>
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
<li class="active">
<a href="#">
<span class="badge pull-right">42</span>首页</a>
</li>
<li>
<a href="#">简介</a>
</li>
<li>
<a href="#">
<span class="badge pull-right">3</span>消息</a>
</li>
</ul>
尝试一下 »
結果は次のとおりです：
