Abzeichen

Dokumentation und Beispiele für Badges, unsere Small-Count- und Labeling-Komponente.

Auf dieser Seite

Beispiele

Badges werden so skaliert, dass sie der Größe des unmittelbar übergeordneten Elements entsprechen, indem relative Schriftgrößen und emEinheiten verwendet werden. Ab v5 haben Badges keine Fokus- oder Hover-Stile mehr für Links.

Überschriften

BeispielüberschriftNeu

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

Tasten

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 bg-secondary">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.

Positioniert

Verwenden Sie Dienstprogramme, um a zu ändern .badgeund es in der Ecke eines Links oder einer Schaltfläche zu positionieren.

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

.badgeSie können die Klasse auch durch ein paar weitere Dienstprogramme ohne Zählung für einen allgemeineren Indikator ersetzen .

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

Hintergrundfarben

Verwenden Sie unsere Hintergrunddienstklassen, um das Erscheinungsbild eines Abzeichens schnell zu ändern. Bitte beachten Sie, dass Sie bei Verwendung von Bootstrap's default .bg-lightwahrscheinlich ein Textfarben-Dienstprogramm wie .text-darkfür das richtige Styling benötigen. Dies liegt daran, dass Hintergrunddienstprogramme nichts anderes als background-color.

Primär Sekundär Erfolg Achtung Warnung Die Info Licht Dunkel

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

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 .visually-hiddenKlasse verborgen ist.

Pillenabzeichen

Verwenden Sie die .rounded-pillUtility-Klasse, um Abzeichen mit einem größeren runder zu machen border-radius.

Primär Sekundär Erfolg Achtung Warnung Die Info Licht Dunkel

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

Sass

Variablen

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