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

html

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

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-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.

html

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

html

<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

Adăugat în v5.2.0

Setați un background-colorcu prim-plan contrastant colorcu ajutoarele noștri.text-bg-{color} . Anterior, era necesar să asociați manual alegerea dvs. .text-{color}și .bg-{color}utilitățile pentru stil, pe care le puteți folosi în continuare dacă preferați.

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

html

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

html

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

CSS

Variabile

Adăugat în v5.2.0

Ca parte a abordării în evoluție a variabilelor CSS a Bootstrap, insignele folosesc acum variabile CSS locale activate .badgepentru personalizare îmbunătățită în timp real. Valorile pentru variabilele CSS sunt setate prin Sass, astfel încât personalizarea Sass este încă acceptată.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

Variabile Sass

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