Merker
Dokumentasjon og eksempler for merker, vår liten telling og merkekomponent.
Merkene skaleres for å matche størrelsen på det umiddelbare overordnede elementet ved å bruke relativ skriftstørrelse og emenheter.
<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>Merker kan brukes som en del av lenker eller knapper for å gi en teller.
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>Merk at avhengig av hvordan de brukes, kan merkene være forvirrende for brukere av skjermlesere og lignende hjelpeteknologier. Mens utformingen av merkene gir et visuelt pekepinn på formålet, vil disse brukerne ganske enkelt bli presentert med innholdet på merket. Avhengig av den spesifikke situasjonen, kan disse merkene virke som tilfeldige tilleggsord eller tall på slutten av en setning, lenke eller knapp.
Med mindre konteksten er klar (som med «Varslinger»-eksemplet, der det forstås at «4» er antall varsler), bør du vurdere å inkludere ekstra kontekst med et visuelt skjult stykke tilleggstekst.
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>Legg til en av de nedenfor nevnte modifikatorklassene for å endre utseendet til et merke.
<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>Formidle mening til hjelpeteknologier
Å bruke farger for å legge til mening gir bare en visuell indikasjon, som ikke vil bli formidlet til brukere av hjelpeteknologier – for eksempel skjermlesere. Sørg for at informasjon angitt med fargen enten er åpenbar fra selve innholdet (f.eks. den synlige teksten), eller er inkludert på alternative måter, for eksempel ekstra tekst skjult i .sr-onlyklassen.
Bruk .badge-pillmodifikasjonsklassen for å gjøre merkene mer avrundede (med en større border-radiusog ekstra horisontal padding). Nyttig hvis du savner merkene fra 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>Bruk av de kontekstuelle .badge-*klassene på et <a>element gir raskt handlingsbare merker med sveve- og fokustilstander.
<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>