Značke
Dokumentacija i primjeri za bedževe, naš mali broj i komponenta označavanja.
Primjeri
Značke se prilagođavaju veličini neposrednog nadređenog elementa korištenjem relativne veličine fonta i em
jedinica. Od v5, značke više nemaju stilove fokusa ili lebdenja za veze.
Naslovi
Primjer naslovaNovo
Primjer naslovaNovo
Primjer naslovaNovo
Primjer naslovaNovo
Primjer naslovaNovo
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 u vezi sa njihovom svrhom, 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 .badge
i 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 .badge
klasu 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-dark
je za pravilno oblikovanje. To je zato što pozadinski uslužni programi ne postavljaju ništa osim background-color
.
<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-hidden
klasom.
Značke za tablete
Upotrijebite .rounded-pill
klasu utility kako biste značke učinili zaobljenijim s većim border-radius
.
<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;