Märken

Dokumentation och exempel för märken, vår lilla räkning och märkningskomponent.

På den här sidan

Exempel

Märken skalas för att matcha storleken på det omedelbara överordnade elementet genom att använda relativ teckenstorlek och emenheter. Från v5 har märken inte längre fokus eller svävningsstilar för länkar.

Rubriker

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 .badgeoch 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 .badgeklassen 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-darkför korrekt stil. Detta beror på att bakgrundsverktyg inte ställer in något annat än background-color.

Primär Sekundär Framgång Fara Varning Info Ljus Mörk

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

Pill-märken

Använd .rounded-pillverktygsklassen för att göra märken mer rundade med en större border-radius.

Primär Sekundär Framgång Fara Varning Info Ljus Mörk

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