Schëlder

Dokumentatioun an Beispiller fir Schëlder, eise klenge Grof a Label Komponente.

Beispill

Badges skala fir d'Gréisst vum direkten Elterendeel ze passen andeems se relativ Schrëftgréisst an emEenheeten benotzt.

Beispill RubrikNei

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

Schëlder kënnen als Deel vu Linken oder Knäpper benotzt ginn fir e Konter ze bidden.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

Bedenkt datt ofhängeg wéi se benotzt ginn, Badges fir Benotzer vun Écran Lieser an ähnlech Hëllefstechnologien duerchernee kënnen. Wärend de Styling vu Badge e visuellen Hiweis iwwer hiren Zweck gëtt, ginn dës Benotzer einfach mam Inhalt vum Badge presentéiert. Ofhängeg vun der spezifescher Situatioun, kënnen dës Schëlder wéi zoufälleg zousätzlech Wierder oder Zuelen um Enn vun engem Saz, Link oder Knäppchen schéngen.

Ausser de Kontext ass kloer (wéi mam Beispill "Notifikatiounen", wou et versteet datt de "4" d'Zuel vun den Notifikatiounen ass), betruecht zousätzlech Kontext mat engem visuell verstoppte Stéck zousätzlech Text.

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

Kontextuell Variatiounen

Füügt eng vun den uewe genannten Modifikatiounsklassen un fir d'Erscheinung vun engem Badge z'änneren.

Primär Secondaire Erfolleg Gefor Warnung Info Liicht Däischter

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

Bedeitung vun Hëllefstechnologien

D'Faarf benotze fir Bedeitung ze addéieren gëtt nëmmen eng visuell Indikatioun, déi net un d'Benotzer vun Assistenztechnologien vermëttelt gëtt - sou wéi Écran Lieser. Vergewëssert Iech datt d'Informatioun, déi mat der Faarf bezeechent gëtt, entweder offensichtlech aus dem Inhalt selwer ass (zB dem siichtbaren Text), oder duerch alternativ Mëttelen abegraff ass, sou wéi zousätzlech Text verstoppt mat der .sr-onlyKlass.

Pille Badges

Benotzt d' .badge-pillModifikateur Klass fir Schëlder méi ofgerënnt ze maachen (mat enger méi grousser border-radiusan zousätzlecher horizontaler padding). Nëtzlech wann Dir d'Badges vu v3 verpasst.

Primär Secondaire Erfolleg Gefor Warnung Info Liicht Däischter

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

Linken

D'Benotzung vun de kontextuelle .badge-*Klassen op engem <a>Element bitt séier handlungsfäeg Badge mat Hover- a Fokuszoustand.

Primär Secondaire Erfolleg Gefor Warnung Info Liicht Däischter

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