Source

Ecusoane

Documentație și exemple pentru insigne, numărul nostru mic și componenta de etichetare.

Exemplu

Insignele se scala pentru a se potrivi cu dimensiunea elementului părinte imediat utilizând dimensiunea și emunitățile relative ale fontului.

Exemplu de titlu Nou
Exemplu de titlu Nou
Exemplu de titlu Nou
Exemplu de titlu Nou
Exemplu de titlu Nou
Exemplu de titlu Nou
<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>

Insignele pot fi folosite ca parte a link-urilor sau butoanelor pentru a oferi un contor.

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

Rețineți că, în funcție de modul în care sunt utilizate, insignele pot fi confuze pentru utilizatorii de cititoare de ecran și de tehnologii de asistență similare. În timp ce stilul insignelor oferă un indiciu vizual cu privire la scopul lor, acestor utilizatori li se va prezenta pur și simplu conținutul insignei. În funcție de situația specifică, aceste insigne pot părea cuvinte sau numere suplimentare aleatorii la sfârșitul unei propoziții, al unui link sau al unui buton.

Cu excepția cazului în care contextul este clar (ca și în exemplul „Notificări”, unde se înțelege că „4” este numărul de notificări), luați în considerare includerea unui context suplimentar cu o porțiune de text suplimentară ascunsă vizual.

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

Variații contextuale

Adăugați oricare dintre clasele de modificatori menționate mai jos pentru a schimba aspectul unei insigne.

Primar Secundar Succes Pericol Avertizare Info Ușoară Întuneric
<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>
Transmiterea sensului tehnologiilor de asistență

Folosirea culorii pentru a adăuga sens oferă doar o indicație vizuală, care nu va fi transmisă utilizatorilor de tehnologii de asistență, cum ar fi cititoarele de ecran. Asigurați-vă că informațiile notate de culoare sunt fie evidente din conținutul în sine (de exemplu, textul vizibil), fie sunt incluse prin mijloace alternative, cum ar fi textul suplimentar ascuns cu .sr-onlyclasa.

Ecusoane cu pastile

Utilizați .badge-pillclasa modificatoare pentru a face insignele mai rotunjite (cu o border-radiusorizontală mai mare și suplimentară padding). Util dacă scapi de insignele din v3.

Primar Secundar Succes Pericol Avertizare Info Ușoară Întuneric
<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>

.badge-*Folosirea claselor contextuale pe un <a>element oferă rapid insigne acționabile cu stări de trecere și focalizare.

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