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 em
unuojn.
Ekzempla titoloNova
Ekzempla titoloNova
Ekzempla titoloNova
Ekzempla titoloNova
Ekzempla titoloNova
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 estas komprenite 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.
<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-only
klaso.
Pilolaj insignoj
Uzu la .badge-pill
modifklason por fari insignojn pli rondetajn (kun pli granda border-radius
kaj plia horizontala padding
). Utila se vi maltrafas la insignojn de 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>
Ligiloj
Uzante la kontekstajn .badge-*
klasojn sur <a>
elemento rapide provizas ageblajn insignojn kun ŝvebado kaj fokuso.
<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>