Märgid

Märkide dokumentatsioon ja näited, meie väike arv ja märgistuskomponent.

Näide

Märgid skaleeruvad, et need vastaksid vahetu emaelemendi suurusele, kasutades suhtelist fondi suurust ja emühikuid.

Näidispealkiri Uus

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

Märke saab kasutada loenduri loomiseks linkide või nuppude osana.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

Pange tähele, et olenevalt kasutusviisist võivad märgid ekraanilugejate ja sarnaste abitehnoloogiate kasutajate jaoks segadusse ajada. Kuigi märkide stiil annab visuaalse vihje nende otstarbele, antakse neile kasutajatele lihtsalt märgi sisu. Olenevalt konkreetsest olukorrast võivad need märgid tunduda juhuslike lisasõnadena või -numbritena lause, lingi või nupu lõpus.

Kui kontekst pole selge (nagu näites „Teavitused”, kus mõistetakse, et „4” on teatiste arv), kaaluge täiendava konteksti lisamist visuaalselt peidetud lisatekstiga.

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

Kontekstuaalsed variatsioonid

Märgi välimuse muutmiseks lisage mõni allpool nimetatud modifikaatoriklass.

Esmane Teisene Edu Oht Hoiatus Info Valgus Tume

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

Abitehnoloogiate tähenduse edasiandmine

Värvi kasutamine tähenduse lisamiseks annab ainult visuaalse viite, mida ei edastata abitehnoloogiate (nt ekraanilugejate) kasutajatele. .sr-onlyVeenduge, et värviga tähistatud teave oleks kas sisust endast ilmne (nt nähtav tekst) või kaasatud alternatiivsete vahenditega, näiteks klassiga peidetud lisatekst .

Pillide märgid

Kasutage .badge-pillmuuteklassi, et muuta märgid ümaramaks (suurema border-radiusja täiendava horisontaalsusega padding). Kasulik, kui teil puuduvad v3 märgid.

Esmane Teisene Edu Oht Hoiatus Info Valgus Tume

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

Lingid

Kontekstuaalsete .badge-*klasside kasutamine <a>elemendil pakub kiiresti hõljutus- ja fookusolekuga märke.

Esmane Teisene Edu Oht Hoiatus Info Valgus Tume

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