Značke

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

Na ovoj stranici

Primjeri

Značke se prilagođavaju veličini neposrednog nadređenog elementa korištenjem relativne veličine fonta i emjedinica. Od v5, značke više nemaju stilove fokusa ili lebdenja za veze.

Naslovi

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

Dugmad

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 bg-secondary">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.

Pozicionirano

Koristite uslužne programe da izmijenite a .badgei postavite ga u kut veze ili 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>

Takođe možete zamijeniti .badgeklasu sa još nekoliko uslužnih programa bez brojanja za generički 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>

Boje pozadine

Koristite naše pozadinske uslužne klase da brzo promijenite izgled značke. Imajte na umu da kada koristite Bootstrap zadanu postavku .bg-light, vjerovatno će vam trebati uslužni program za boju teksta kao što .text-darkje za pravilan stil. To je zato što pozadinski uslužni programi ne postavljaju ništa osim background-color.

Primarni Sekundarni Uspjeh Opasnost Upozorenje Info Light Dark

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

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

Značke za tablete

Upotrijebite .rounded-pillklasu utility kako biste značke učinili zaobljenijim s većim border-radius.

Primarni Sekundarni Uspjeh Opasnost Upozorenje Info Light Dark

<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

Varijable

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