<span class="badge">を追加することで、容易に「New」または「未読」のリンク、Bootstrapのナビゲーション、 その他項目を強調します。

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

自身による折りたたみ

「New」や「未読」の項目が存在しない場合、バッジは(CSSの:emptyセレクタを通じて)コンテンツが存在しないものとして、 折りたたまれます(collapse)。

クロスブラウザの互換性
IE8では、:emptyセレクタがサポートされないため、この折りたたみが行われません。

アクティブなナビゲーションの状態に適応させる

組み込みのスタイルには、ピルナビゲーションがアクティブな状態の時にバッジに配置するためのものが含まれています。

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

 Back to top