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

html

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

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-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.

html

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

html

<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

Hinzugefügt in v5.2.0

Setzen Sie mit unseren Helfernbackground-color einen kontrastreichen Vordergrund . Zuvor war es erforderlich, Ihre Wahl und Dienstprogramme für das Styling manuell zu koppeln, die Sie nach wie vor verwenden können, wenn Sie dies bevorzugen.color.text-bg-{color}.text-{color}.bg-{color}

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

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-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

html

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

CSS

Variablen

Hinzugefügt in v5.2.0

Als Teil des sich entwickelnden CSS-Variablen-Ansatzes von Bootstrap verwenden Badges jetzt lokale CSS-Variablen .badgefür eine verbesserte Echtzeit-Anpassung. Die Werte für die CSS-Variablen werden über Sass festgelegt, sodass die Sass-Anpassung auch weiterhin unterstützt wird.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

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;