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 emvienības.

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.

Primārs Sekundārais Panākumi Briesmas Brīdinājums Informācija Gaisma Tumšs

<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-onlyklasi paslēptu papildu tekstu.

Tabletes nozīmītes

Izmantojiet .badge-pillmodifikatoru klasi, lai padarītu emblēmas noapaļotākas (ar lielāku border-radiusun papildu horizontālu padding). Noderīgi, ja jums trūkst emblēmu no v3.

Primārs Sekundārais Panākumi Briesmas Brīdinājums Informācija Gaisma Tumšs

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

Primārs Sekundārais Panākumi Briesmas Brīdinājums Informācija Gaisma Tumšs

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