Badges
Badges(バッチ)についての概要と使い方の例です。
Example
親要素のサイズに一致するように相対的なフォントサイズ em を使用しています。
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>ボタンの一部としても利用することができます。
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>リンクやボタンのように見えてしまうので使い方には注意が必要です。
コンテキストが明確なときだけ使うようにしましょう。 (例えば “お知らせ (4)” のような時のように)
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>Contextual variations
バッジの色を下記のように変更することができます。
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>Conveying meaning to assistive technologies
色を用いた場合, 視覚でしか意味を伝えることができないのでスクリーンリーダーなどに対応することはできません。
そのため, 色で付加された情報がコンテンツから明らかであるか, 追加のテキストを不可視で追加する .sr-only クラスなどの手法を用いて含まれているかを確認してください。
Pill badges
.badge-pill を適用すると, 丸みをおびたバッジを作成できます。
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>Links
.badge-* クラスを <a> 要素に適用するとホバー時にでフォーカスすることができます。
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>v4.4