Märken
Dokumentation och exempel för märken, vår lilla räkning och märkningskomponent.
Exempel
Märken skalas för att matcha storleken på det omedelbara överordnade elementet genom att använda relativ teckenstorlek och em
enheter. Från v5 har märken inte längre fokus- eller svävstilar för länkar.
Rubriker
ExempelrubrikNy
ExempelrubrikNy
ExempelrubrikNy
ExempelrubrikNy
ExempelrubrikNy
ExempelrubrikNy
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
Knappar
Märken kan användas som en del av länkar eller knappar för att ge en räknare.
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-secondary">4</span>
</button>
Observera att märken, beroende på hur de används, kan vara förvirrande för användare av skärmläsare och liknande hjälpmedel. Medan designen av märken ger en visuell fingervisning om deras syfte, kommer dessa användare helt enkelt att presenteras med märkets innehåll. Beroende på den specifika situationen kan dessa märken verka som slumpmässiga ytterligare ord eller siffror i slutet av en mening, länk eller knapp.
Om inte sammanhanget är tydligt (som med exemplet "Notifikationer", där det är underförstått att "4" är antalet aviseringar), överväg att inkludera ytterligare sammanhang med en visuellt dold del av ytterligare text.
Placerad
Använd verktyg för att ändra en .badge
och placera den i hörnet av en länk eller knapp.
<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>
Du kan också ersätta .badge
klassen med några fler verktyg utan att räkna med en mer generisk indikator.
<button type="button" class="btn btn-primary position-relative">
Profile
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</button>
Bakgrundsfärger
Använd våra bakgrundsklasser för att snabbt ändra utseendet på ett märke. Observera att när du använder Bootstraps standard .bg-light
, kommer du sannolikt att behöva ett verktyg för textfärg som .text-dark
för korrekt stil. Detta beror på att bakgrundsverktyg inte ställer in något annat än background-color
.
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
Förmedla mening till hjälpmedel
Att använda färg för att lägga till mening ger bara en visuell indikation, som inte kommer att förmedlas till användare av hjälpmedel – som skärmläsare. Se till att information som betecknas med färgen antingen är uppenbar från själva innehållet (t.ex. den synliga texten), eller är inkluderad på andra sätt, såsom ytterligare text gömd med .visually-hidden
klassen.
Pill-märken
Använd .rounded-pill
verktygsklassen för att göra märken mer rundade med en större border-radius
.
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>
Sass
Variabler
$badge-font-size: .75em;
$badge-font-weight: $font-weight-bold;
$badge-color: $white;
$badge-padding-y: .35em;
$badge-padding-x: .65em;
$badge-border-radius: $border-radius;