Badges
Dokumintaasje en foarbylden foar badges, ús lytse telling en labeling komponint.
Badges skaalje om te passen by de grutte fan it direkte âlderelemint troch relative lettertypegrutte en emienheden te brûken.
<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>Foegje ien fan 'e hjirûnder neamde modifierklassen ta om it uterlik fan in badge te feroarjen.
<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.
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.
<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>It brûken fan de kontekstuele .badge-*klassen op in <a>elemint jout fluch aksjebere badges mei hover en fokus steaten.
<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>