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 titluNou
Exemplu de titluNou
Exemplu de titluNou
Exemplu de titluNou
Exemplu de titluNou
Exemplu de titluNou
<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.
<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 semnificație 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 indicate 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.
<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>Legături
.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>