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

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

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

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

<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

Za hitro spreminjanje videza značke uporabite naše razrede pripomočkov v ozadju. Upoštevajte, da .bg-lightboste pri uporabi privzetega Bootstrapa verjetno potrebovali pripomoček za barvo besedila, na primer .text-darkza pravilno oblikovanje. To je zato, ker pripomočki v ozadju ne nastavijo ničesar drugega kot background-color.

Primarni Sekundarno Uspeh Nevarnost Opozorilo Informacije Svetloba Temno

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

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

<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

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;