バッジ - プロ 成分

バッジのための文書化と例、私たちの少数とラベルの要素。

バッジは、カウンターを提供するためのリンクまたはボタンの一部として使用できます。

<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>