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

html

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

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-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.

html

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

html

<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

Lades till i v5.2.0

Ställ in en background-colormed kontrasterande förgrund colormed våra .text-bg-{color}hjälpare . Tidigare var det nödvändigt att manuellt koppla ihop ditt val av .text-{color}och .bg-{color}verktyg för styling, som du fortfarande kan använda om du föredrar det.

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

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-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

html

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

CSS

Variabler

Lades till i v5.2.0

Som en del av Bootstraps utvecklande CSS-variabler använder märken nu lokala CSS-variabler .badgeför förbättrad realtidsanpassning. Värden för CSS-variablerna ställs in via Sass, så Sass-anpassning stöds fortfarande också.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

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;