Nozīmītes
Dokumentācija un nozīmīšu piemēri, mūsu mazais skaits un marķēšanas komponents.
Piemērs
Emblēmas tiek mērogotas, lai tās atbilstu tiešā vecākelementa lielumam, izmantojot relatīvo fonta izmēru un em
vienības.
Virsraksta piemērsJauns
Virsraksta piemērsJauns
Virsraksta piemērsJauns
Virsraksta piemērsJauns
Virsraksta piemērsJauns
Virsraksta piemērsJauns
<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>
Nozīmītes var izmantot kā daļu no saitēm vai pogām, lai nodrošinātu skaitītāju.
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>
Ņemiet vērā, ka atkarībā no izmantošanas veida emblēmas var būt mulsinošas ekrāna lasītāju un līdzīgu palīgtehnoloģiju lietotājiem. Lai gan emblēmu stils sniedz vizuālu norādi par to mērķi, šiem lietotājiem vienkārši tiks parādīts emblēmas saturs. Atkarībā no konkrētās situācijas šīs emblēmas var šķist nejauši papildu vārdi vai cipari teikuma, saites vai pogas beigās.
Ja vien konteksts nav skaidrs (kā piemērā “Paziņojumi”, kur saprot, ka “4” ir paziņojumu skaits), apsveriet iespēju iekļaut papildu kontekstu ar vizuāli slēptu papildu teksta daļu.
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>
Kontekstuālās variācijas
Pievienojiet jebkuru no tālāk minētajām modifikatoru klasēm, lai mainītu emblēmas izskatu.
<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>
Nozīmes nodošana palīgtehnoloģijām
Krāsu izmantošana nozīmes pievienošanai nodrošina tikai vizuālu norādi, kas netiks nodota palīgtehnoloģiju lietotājiem, piemēram, ekrāna lasītājiem. Nodrošiniet, lai informācija, kas apzīmēta ar krāsu, būtu vai nu acīmredzama no paša satura (piemēram, redzamā teksta), vai arī tā ir iekļauta, izmantojot alternatīvus līdzekļus, piemēram, ar .sr-only
klasi paslēptu papildu tekstu.
Tabletes nozīmītes
Izmantojiet .badge-pill
modifikatoru klasi, lai padarītu emblēmas noapaļotākas (ar lielāku border-radius
un papildu horizontālu padding
). Noderīgi, ja jums trūkst emblēmu no v3.
<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>
Saites
Izmantojot elementa kontekstuālās .badge-*
klases, <a>
ātri tiek nodrošinātas praktiskas emblēmas ar kursora novietošanas un fokusa stāvokļiem.
<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>