Abzeichen
Dokumentation und Beispiele für Badges, unsere Small-Count- und Labeling-Komponente.
Badges werden so skaliert, dass sie der Größe des unmittelbar übergeordneten Elements entsprechen, indem relative Schriftgrößen und emEinheiten verwendet werden.
<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>Abzeichen können als Teil von Links oder Schaltflächen verwendet werden, um einen Zähler bereitzustellen.
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>Beachten Sie, dass Badges je nach Verwendungszweck für Benutzer von Screenreadern und ähnlichen Hilfstechnologien verwirrend sein können. Während das Design von Abzeichen einen visuellen Hinweis auf ihren Zweck bietet, wird diesen Benutzern einfach der Inhalt des Abzeichens präsentiert. Abhängig von der spezifischen Situation können diese Abzeichen wie zufällige zusätzliche Wörter oder Zahlen am Ende eines Satzes, Links oder einer Schaltfläche erscheinen.
Wenn der Kontext nicht klar ist (wie im Beispiel „Benachrichtigungen“, wo die „4“ die Anzahl der Benachrichtigungen ist), ziehen Sie in Betracht, zusätzlichen Kontext mit einem visuell verborgenen zusätzlichen Text hinzuzufügen.
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>Fügen Sie eine der unten genannten Modifikatorklassen hinzu, um das Aussehen eines Abzeichens zu ändern.
<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>Bedeutung von Hilfstechnologien vermitteln
Die Verwendung von Farbe, um Bedeutung hinzuzufügen, bietet nur einen visuellen Hinweis, der Benutzern von Hilfstechnologien – wie z. B. Bildschirmlesegeräten – nicht vermittelt wird. Stellen Sie sicher, dass die durch die Farbe gekennzeichneten Informationen entweder aus dem Inhalt selbst ersichtlich sind (z. B. der sichtbare Text) oder durch alternative Mittel enthalten sind, z. B. durch zusätzlichen Text, der mit der .sr-onlyKlasse verborgen ist.
Verwenden Sie die .badge-pillModifikatorklasse, um Abzeichen runder zu machen (mit einem größeren border-radiusund zusätzlichen horizontalen padding). Nützlich, wenn Sie die Abzeichen von v3 vermissen.
<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>Die Verwendung der kontextabhängigen .badge-*Klassen für ein <a>Element bietet schnell umsetzbare Badges mit Schwebe- und Fokuszuständen.
<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>