バッジ
小さなカウントとラベリング コンポーネントであるバッジのドキュメントと例。
例
バッジは、相対的なフォント サイズとem
単位を使用して、直接の親要素のサイズに合わせてスケーリングされます。v5 の時点で、バッジにはリンクのフォーカスまたはホバー スタイルがなくなりました。
見出し
見出しの例新しい
見出しの例新しい
見出しの例新しい
見出しの例新しい
見出しの例新しい
見出しの例新しい
<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」が通知の数であると理解されている場合)、視覚的に隠された追加のテキストを含む追加のコンテキストを含めることを検討してください。
ポジショニング
ユーティリティを使用して を変更し.badge
、リンクまたはボタンの隅に配置します。
<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>
.badge
クラスを、より一般的なインジケーターのカウントなしでさらにいくつかのユーティリティに置き換えることもできます。
<button type="button" class="btn btn-primary position-relative">
Profile
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</button>
背景色
バックグラウンド ユーティリティ クラスを使用して、バッジの外観をすばやく変更します。Bootstrap の default を使用する場合、適切なスタイル設定.bg-light
などのテキスト カラー ユーティリティが必要になる可能性があることに注意してください。.text-dark
これは、バックグラウンド ユーティリティが何も設定しないためbackground-color
です。
<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>
支援技術に意味を伝える
色を使用して意味を追加しても、視覚的な指示しか提供されず、スクリーン リーダーなどの支援技術のユーザーには伝わりません。.visually-hidden
色で示される情報が、コンテンツ自体 (表示されるテキストなど) から明らかであるか、クラスで非表示の追加テキストなどの代替手段によって含まれていることを確認してください。
ピルバッジ
ユーティリティ クラスを使用して.rounded-pill
、バッジをより大きな で丸みを帯びたものにしborder-radius
ます。
<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>
サス
変数
$badge-font-size: .75em;
$badge-font-weight: $font-weight-bold;
$badge-color: $white;
$badge-padding-y: .35em;
$badge-padding-x: .65em;
$badge-border-radius: $border-radius;