Značke
Dokumentacija in primeri značk, naša komponenta majhnega štetja in označevanja.
Primeri
Značke se prilagajajo velikosti neposrednega nadrejenega elementa z uporabo relativne velikosti pisave in em
enot. Od različice 5 značke nimajo več stilov fokusa ali lebdenja za povezave.
Naslovi
Primer naslovaNovo
Primer naslovaNovo
Primer naslovaNovo
Primer naslovaNovo
Primer naslovaNovo
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 .badge
in 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 .badge
z 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-light
boste pri uporabi privzetega Bootstrapa verjetno potrebovali pripomoček za barvo besedila, na primer .text-dark
za pravilno oblikovanje. To je zato, ker pripomočki v ozadju ne nastavijo ničesar drugega kot 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>
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-hidden
razredom.
Značke za tablete
Uporabite .rounded-pill
razred uporabnosti, da naredite značke bolj zaobljene z večjim 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
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;