バッジ - プロ 成分
バッジのための文書化と例、私たちの少数とラベルの要素。
例
バッジは、カウンターを提供するためのリンクまたはボタンの一部として使用できます。
<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>