Badges

Dokumintaasje en foarbylden foar badges, ús lytse telling en labeling komponint.

Foarbyld

Badges skaalje om te passen by de grutte fan it direkte âlderelemint troch relative lettertypegrutte en emienheden te brûken.

Foarbyld headingNij

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

Badges kinne brûkt wurde as ûnderdiel fan keppelings as knoppen om in teller te leverjen.

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

Tink derom dat ôfhinklik fan hoe't se wurde brûkt, badges kinne betiizjend wêze foar brûkers fan skermlêzers en ferlykbere assistive technologyen. Wylst de styling fan badges in fisuele oanwizing leveret oer har doel, sille dizze brûkers gewoan de ynhâld fan 'e badge wurde presintearre. Ofhinklik fan 'e spesifike situaasje kinne dizze badges lykje as willekeurige ekstra wurden of sifers oan' e ein fan in sin, keppeling of knop.

Behalven as de kontekst dúdlik is (lykas by it foarbyld "Notifikaasjes", wêr't it wurdt begrepen dat de "4" it oantal notifikaasjes is), beskôgje dan ekstra kontekst op te nimmen mei in visueel ferburgen stik ekstra tekst.

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

Kontekstuele fariaasjes

Foegje ien fan 'e hjirûnder neamde modifierklassen ta om it uterlik fan in badge te feroarjen.

Primêr Sekundêr Sukses Gefaar Warskôging Info Ljocht Tsjuster

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

Betsjutting oerbringe oan assistinte technologyen

It brûken fan kleur om betsjutting ta te foegjen jout allinich in fisuele yndikaasje, dy't net sil wurde oerbrocht oan brûkers fan assistinte technologyen - lykas skermlêzers. Soargje derfoar dat ynformaasje oanjûn troch de kleur óf dúdlik is út de ynhâld sels (bgl. de sichtbere tekst), óf wurdt opnommen troch alternative middels, lykas ekstra tekst ferburgen mei de .sr-onlyklasse.

Pille badges

Brûk de .badge-pillmodifikaasjeklasse om badges mear rûn te meitsjen (mei in gruttere border-radiusen ekstra horizontale padding). Nuttich as jo de badges misse fan v3.

Primêr Sekundêr Sukses Gefaar Warskôging Info Ljocht Tsjuster

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

Links

It brûken fan de kontekstuele .badge-*klassen op in <a>elemint jout fluch aksjebere badges mei hover en fokus steaten.

Primêr Sekundêr Sukses Gefaar Warskôging Info Ljocht Tsjuster

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