バッジ - プロ 成分
バッジのための文書化と例、私たちの少数とラベルの要素。
例
バッジは、カウンターを提供するためのリンクまたはボタンの一部として使用できます。
<button type="button" class="btn btn-primary">
通知 <span class="badge badge-default">4</span>
</button>文脈上の変化
バッジの外観を変更するには、下記の修飾子クラスを追加します。
一次
情報
成功
危険
警告
デフォルト
<span class="badge badge-primary">一次</span>
<span class="badge badge-info">情報</span>
<span class="badge badge-success">成功</span>
<span class="badge badge-danger">危険</span>
<span class="badge badge-warning">警告</span>
<span class="badge badge-default">デフォルト</span>ピルバッジ
バッジをより丸くするには（.badge-pill修飾子クラスを使います（より大きな border-radiusと追加の水平の padding`を使います）。 あなたがv3のバッジを見逃した場合に便利です。
一次
情報
成功
危険
警告
デフォルト
<span class="badge badge-pill badge-primary">一次</span>
<span class="badge badge-pill badge-info">情報</span>
<span class="badge badge-pill badge-success">成功</span>
<span class="badge badge-pill badge-danger">危険</span>
<span class="badge badge-pill badge-warning">警告</span>
<span class="badge badge-pill badge-default">デフォルト</span>リンク集
<a>要素上でコンテキスト的な .badge- *クラスを使用すると、ホバー状態とフォーカス状態を持った_actionable_バッジがすぐに得られます。
<a href="#" class="badge badge-primary">一次</a>
<a href="#" class="badge badge-info">情報</a>
<a href="#" class="badge badge-success">成功</a>
<a href="#" class="badge badge-danger">危険</a>
<a href="#" class="badge badge-warning">警告</a>
<a href="#" class="badge badge-default">デフォルト</a>