Merker

Dokumentasjon og eksempler for merker, vår liten telling og merkekomponent.

På denne siden

Eksempler

Merkene skaleres for å matche størrelsen på det umiddelbare overordnede elementet ved å bruke relativ skriftstørrelse og emenheter. Fra og med v5 har ikke merkene lenger fokus eller svevestiler for linker.

Overskrifter

Eksempel overskriftNy

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>

Knapper

Merker kan brukes som en del av lenker eller knapper for å gi en teller.

html

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

Plassert

Bruk verktøy for å endre en .badgeog plassere den i hjørnet av en lenke 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 også erstatte .badgeklassen med noen flere verktøy uten å telle for 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>

Bakgrunnsfarger

Lagt til i v5.2.0

Sett en background-colormed kontrasterende forgrunn colormed våre .text-bg-{color}hjelpere . Tidligere var det nødvendig å manuelt pare ditt valg av .text-{color}og .bg-{color}verktøy for styling, som du fortsatt kan bruke hvis du foretrekker det.

Hoved Sekundær Suksess Fare Advarsel Info Lys 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>

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

Pillemerker

Bruk .rounded-pillbruksklassen til å gjøre merkene mer avrundede med en større border-radius.

Hoved Sekundær Suksess Fare Advarsel Info Lys 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

Lagt til i v5.2.0

Som en del av Bootstraps utviklende tilnærming til CSS-variabler, bruker merker nå lokale CSS-variabler .badgefor forbedret sanntidstilpasning. Verdier for CSS-variablene settes via Sass, så Sass-tilpasning støttes fortsatt også.

  --#{$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;