バッジ/ラベル

バッジ

バッジはリンクに関連付けられているアイテム数を表示します。

数字（5、10、および2）がバッジです。
バッジを作成するには、 <span> 要素で .badge クラスを使用します。

<a href="#">ニュース <span class="badge">5</span></a><br>
<a href="#">コメント <span class="badge">10</span></a><br>
<a href="#">更新 <span class="badge">2</span></a>

バッジは、ボタンのような他の要素で使用することもできます。

<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>

ラベル

ラベルは何かに関する追加情報を提供するために使用されます。
.label クラスを使用し、 <span> 要素内に6つのコンテキストクラス、 .label-default 、 .label-primary 、 .label-success 、 .label-info 、 .label-warning または .label-danger のいずれかを使用してラベルを作成します。

Example New

<h1>Example <span class="label label-default">New</span></h1>
<h2>Example <span class="label label-default">New</span></h2>
<h3>Example <span class="label label-default">New</span></h3>
<h4>Example <span class="label label-default">New</span></h4>
<h5>Example <span class="label label-default">New</span></h5>
<h6>Example <span class="label label-default">New</span></h6>

Defaultラベル Primaryラベル Successラベル Infoラベル Warningラベル Dangerラベル

<span class="label label-default">Defaultラベル</span>
<span class="label label-primary">Primaryラベル</span>
<span class="label label-success">Successラベル</span>
<span class="label label-info">Infoラベル</span>
<span class="label label-warning">Warningラベル</span>
<span class="label label-danger">Dangerラベル</span>