Badges
Dokumentation og eksempler til badges, vores lille tæller og mærkningskomponent.
Badges skaleres til at matche størrelsen af det umiddelbare overordnede element ved at bruge relativ skriftstørrelse og emenheder.
<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 kan bruges som en del af links eller knapper til at give en tæller.
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>Bemærk, at afhængigt af hvordan de bruges, kan badges være forvirrende for brugere af skærmlæsere og lignende hjælpeteknologier. Mens stylingen af badges giver et visuelt fingerpeg om deres formål, vil disse brugere blot blive præsenteret for indholdet af badget. Afhængigt af den specifikke situation kan disse badges virke som tilfældige ekstra ord eller tal i slutningen af en sætning, et link eller en knap.
Medmindre konteksten er klar (som med eksemplet "Notifikationer", hvor det forstås, at "4" er antallet af notifikationer), skal du overveje at inkludere yderligere kontekst med et visuelt skjult stykke 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>Tilføj en af de nedenfor nævnte modifikationsklasser for at ændre udseendet af et badge.
<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 hjælpeteknologier
Brug af farve til at tilføje betydning giver kun en visuel indikation, som ikke vil blive formidlet til brugere af hjælpeteknologier - såsom skærmlæsere. Sørg for, at oplysninger, der er angivet med farven, enten er tydelige fra selve indholdet (f.eks. den synlige tekst), eller er inkluderet via alternative måder, såsom ekstra tekst skjult i .sr-onlyklassen.
Brug .badge-pillmodifikationsklassen til at gøre badges mere afrundede (med en større border-radiusog yderligere vandret padding). Nyttigt, hvis du savner badges 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>Brug af de kontekstuelle .badge-*klasser på et <a>element giver hurtigt brugbare badges med svæve- og fokustilstande.
<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>