Značke

Dokumentacija in primeri značk, naša komponenta majhnega štetja in označevanja.

Na tej strani

Primeri

Značke se prilagajajo velikosti neposrednega nadrejenega elementa z uporabo relativne velikosti pisave in emenot. Od različice 5 značke nimajo več stilov fokusa ali lebdenja za povezave.

Naslovi

Primer naslovaNovo

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>

Gumbi

Značke se lahko uporabljajo kot del povezav ali gumbov za zagotavljanje števca.

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

Upoštevajte, da lahko značke, odvisno od njihove uporabe, zmedejo uporabnike bralnikov zaslona in podobnih podpornih tehnologij. Medtem ko slog značk zagotavlja vizualni znak glede njihovega namena, bo tem uporabnikom preprosto predstavljena vsebina značke. Odvisno od specifične situacije se lahko te značke zdijo kot naključne dodatne besede ali številke na koncu stavka, povezave ali gumba.

Razen če je kontekst jasen (kot pri primeru »Obvestila«, kjer se razume, da je »4« število obvestil), razmislite o vključitvi dodatnega konteksta z vizualno skritim delom dodatnega besedila.

Postavljen

Uporabite pripomočke, da spremenite .badgein ga postavite v kot povezave ali gumba.

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>

Razred lahko zamenjate tudi .badgez nekaj dodatnimi pripomočki brez štetja za bolj splošen 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>

Barve ozadja

Dodano v v5.2.0

Nastavite background-colors kontrastnim ospredjem colorz našimi .text-bg-{color}pomočniki . Prej je bilo treba ročno združiti izbiro .text-{color}in .bg-{color}pripomočke za oblikovanje, ki jih lahko še vedno uporabljate, če želite.

Primarni Sekundarno Uspeh Nevarnost Opozorilo Informacije Svetloba Temno

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>

Prenos pomena za podporne tehnologije

Uporaba barve za dodajanje pomena zagotavlja le vizualno indikacijo, ki ne bo posredovana uporabnikom podpornih tehnologij – kot so bralniki zaslona. Zagotovite, da so informacije, označene z barvo, očitne iz same vsebine (npr. vidno besedilo) ali pa so vključene z alternativnimi sredstvi, kot je dodatno besedilo, skrito z .visually-hiddenrazredom.

Značke za tablete

Uporabite .rounded-pillrazred uporabnosti, da naredite značke bolj zaobljene z večjim border-radius.

Primarni Sekundarno Uspeh Nevarnost Opozorilo Informacije Svetloba Temno

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

Spremenljivke

Dodano v v5.2.0

Kot del Bootstrapovega razvijajočega se pristopa spremenljivk CSS zdaj značke uporabljajo lokalne spremenljivke CSS .badgeza izboljšano prilagajanje v realnem času. Vrednosti za spremenljivke CSS so nastavljene prek Sass, tako da je še vedno podprto tudi prilagajanje Sass.

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

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