Značke

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

Primer

Značke se prilagajajo velikosti neposrednega nadrejenega elementa z uporabo relativne velikosti pisave in emenot.

Primer naslova Novo

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

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

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

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

Kontekstualne variacije

Če želite spremeniti videz značke, dodajte katerega koli od spodaj navedenih razredov modifikatorjev.

Primarni Sekundarno Uspeh Nevarnost Opozorilo Informacije Svetloba Temno

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

Značke za tablete

Uporabite .badge-pillmodifikatorski razred, da naredite značke bolj zaobljene (z večjim border-radiusin dodatnim vodoravnim padding). Uporabno, če pogrešate značke iz v3.

Primarni Sekundarno Uspeh Nevarnost Opozorilo Informacije Svetloba Temno

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

Povezave

Uporaba kontekstualnih .badge-*razredov na <a>elementu hitro zagotovi uporabne značke s stanji lebdenja in fokusa.

Primarni Sekundarno Uspeh Nevarnost Opozorilo Informacije Svetloba Temno

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>