Značke

Dokumentacija i primjeri za bedževe, naš mali broj i komponenta označavanja.

Primjer

Značke se prilagođavaju veličini neposrednog nadređenog elementa korištenjem relativne veličine fonta i emjedinica.

Primjer 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 mogu koristiti kao dio veza ili dugmadi za pružanje brojača.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

Imajte na umu da u zavisnosti od načina na koji se koriste, značke mogu biti zbunjujuće za korisnike čitača ekrana i sličnih pomoćnih tehnologija. Dok stil bedževa pruža vizuelni znak njihove svrhe, ovim korisnicima će jednostavno biti predstavljen sadržaj bedža. Ovisno o konkretnoj situaciji, ove značke mogu izgledati kao nasumične dodatne riječi ili brojevi na kraju rečenice, veze ili dugmeta.

Osim ako je kontekst jasan (kao u primjeru „Obaveštenja“, gde se podrazumeva da je „4“ broj obaveštenja), razmislite o uključivanju dodatnog konteksta sa vizuelno skrivenim delom dodatnog teksta.

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

Kontekstualne varijacije

Dodajte bilo koju od dole navedenih klasa modifikatora da promijenite izgled značke.

Primarni Sekundarni Uspjeh Opasnost Upozorenje Info Light Dark

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

Prenošenje značenja pomoćnim tehnologijama

Korištenje boje za dodavanje značenja pruža samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači ekrana. Osigurajte da su informacije označene bojom ili očigledne iz samog sadržaja (npr. vidljivi tekst), ili su uključene putem alternativnih sredstava, kao što je dodatni tekst skriven .sr-onlyklasom.

Značke za tablete

Upotrijebite .badge-pillklasu modifikatora kako biste značke učinili zaobljenijim (s većim border-radiusi dodatnim horizontalnim padding). Korisno ako vam nedostaju značke iz v3.

Primarni Sekundarni Uspjeh Opasnost Upozorenje Info Light Dark

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

Linkovi

Korištenje kontekstualnih .badge-*klasa na <a>elementu brzo daje značke koje se mogu primijeniti sa stanjima lebdenja i fokusa.

Primarni Sekundarni Uspjeh Opasnost Upozorenje Info Light Dark

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