Insignoj

Dokumentado kaj ekzemploj por insignoj, nia malgranda kalkulo kaj etikedkomponento.

Ekzemplo

Insignoj skalas por kongrui kun la grandeco de la tuja gepatra elemento uzante relativajn tipargrandecon kaj emunuojn.

Ekzempla titoloNova

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

Insignoj povas esti uzataj kiel parto de ligiloj aŭ butonoj por provizi nombrilon.

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

Notu, ke depende de kiel ili estas uzataj, insignoj povas esti konfuzaj por uzantoj de ekranlegiloj kaj similaj helpaj teknologioj. Dum la stilo de insignoj donas vidan indikon pri ilia celo, ĉi tiuj uzantoj simple estos prezentitaj kun la enhavo de la insigno. Depende de la specifa situacio, ĉi tiuj insignoj povas ŝajni kiel hazardaj pliaj vortoj aŭ nombroj ĉe la fino de frazo, ligilo aŭ butono.

Krom se la kunteksto estas klara (kiel ĉe la ekzemplo "Avizoj", kie oni komprenas, ke la "4" estas la nombro da sciigoj), konsideru inkluzivi plian kuntekston kun videble kaŝita aldona teksto.

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

Kuntekstaj variadoj

Aldonu iun el la sube menciitaj modifklasoj por ŝanĝi la aspekton de insigno.

Primaraj Sekundara Sukceso Danĝero Averto Info Lumo Mallumo

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

Transdonante signifon al helpaj teknologioj

Uzi koloron por aldoni signifon nur provizas vidan indikon, kiu ne estos transdonita al uzantoj de helpaj teknologioj - kiel ekranlegiloj. Certigu, ke informoj indikitaj per la koloro estas aŭ evidenta de la enhavo mem (ekz. la videbla teksto), aŭ estas inkluzivita per alternativaj rimedoj, kiel aldona teksto kaŝita kun la .sr-onlyklaso.

Pilolaj insignoj

Uzu la .badge-pillmodifklason por fari insignojn pli rondetajn (kun pli granda border-radiuskaj plia horizontala padding). Utila se vi maltrafas la insignojn de v3.

Primaraj Sekundara Sukceso Danĝero Averto Info Lumo Mallumo

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

Ligiloj

Uzante la kontekstajn .badge-*klasojn sur <a>elemento rapide provizas ageblajn insignojn kun ŝvebado kaj fokuso.

Primaraj Sekundara Sukceso Danĝero Averto Info Lumo Mallumo

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