Badges (バッジ)
バッジについての概要と使い方の例です。
Example
親要素のサイズに一致するように相対的なフォントサイズ em を使用しています。
v5 以降、バッジにはリンクのフォーカススタイルやホバースタイルがありません。
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>バッジは、リンクやボタンの一部としてカウンターとして使用することができます。
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-secondary">4</span>
</button>バッジの使用方法によっては、スクリーンリーダーや同様の支援技術を使用しているユーザーにとっては混乱を招く可能性があることに注意してください。 バッジのスタイルはその目的を視覚的に示すものですが、このようなユーザーには単にバッジの内容が提示されるだけです。特定の状況に応じて、これらのバッジは、文章、リンク、またはボタンの最後にランダムに追加された単語や数字のように見えるかもしれません。
文脈が明確でない限り（「通知」の例のように、「4」が通知の数であると理解されている場合）、視覚的に隠された追加テキストで追加の文脈を含めることを検討してください。
<button type="button" class="btn btn-primary">
Profile <span class="badge bg-secondary">9</span>
<span class="visually-hidden">unread messages</span>
</button>Background colors
バックグラウンドユーティリティクラスを使用して、バッジの外観を変更できます。
Bootstrapのデフォルトの .bg-light を使用する場合、適切なスタイリングのために .text-darkのようなテキストカラーを変更するユーティリティが必要になる可能性があることに注意してください。
バックグラウンドユーティリティクラスは、背景色以外は設定をしません。
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.
Pill badges
.rounded-pill を使用すると丸みを帯びた形状にすることができます。
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>