Ecusoane

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

Pe aceasta pagina

Exemple

Insignele se scala pentru a se potrivi cu dimensiunea elementului părinte imediat utilizând dimensiunea și emunitățile relative ale fontului. Începând cu versiunea 5, insignele nu mai au stiluri de focalizare sau de trecere cu mouse-ul pentru linkuri.

Titluri

Exemplu de titluNou

<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>

Butoane

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 bg-secondary">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.

Pozitionat

Utilizați utilitare pentru a modifica un .badgeși poziționați-l în colțul unui link sau al unui buton.

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

De asemenea, puteți înlocui .badgeclasa cu câteva utilități suplimentare fără a număra un indicator mai generic.

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

Culori de fundal

Utilizați clasele noastre de utilitate de fundal pentru a schimba rapid aspectul unei insigne. Vă rugăm să rețineți că atunci când utilizați implicit Bootstrap .bg-light, veți avea nevoie probabil de un utilitar pentru culoarea textului, cum ar fi .text-darkpentru stilul adecvat. Acest lucru se datorează faptului că utilitățile de fundal nu setează nimic altceva decât background-color.

Primar Secundar Succes Pericol Avertizare Info Ușoară Întuneric

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-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 .visually-hiddenclasa.

Ecusoane cu pastile

Utilizați .rounded-pillclasa de utilitate pentru a face insignele mai rotunjite cu o insignă mai mare border-radius.

Primar Secundar Succes Pericol Avertizare Info Ușoară Întuneric

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>

Sass

Variabile

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;