Insignoj
Dokumentado kaj ekzemploj por insignoj, nia malgranda kalkulo kaj etikedkomponento.
Ekzemploj
Insignoj skalas por kongrui kun la grandeco de la tuja gepatra elemento uzante relativajn tipargrandecon kaj em
unuojn. Ekde v5, insignoj ne plu havas fokusajn aŭ ŝvebajn stilojn por ligiloj.
Titoloj
Ekzempla titoloNova
Ekzempla titoloNova
Ekzempla titoloNova
Ekzempla titoloNova
Ekzempla titoloNova
Ekzempla titoloNova
<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>
Butonoj
Insignoj povas esti uzataj kiel parto de ligiloj aŭ butonoj por provizi nombrilon.
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-secondary">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.
Poziciita
Uzu ilojn por modifi a .badge
kaj poziciigi ĝin en la angulon de ligilo aŭ butono.
<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>
Vi ankaŭ povas anstataŭigi la .badge
klason per kelkaj pli da utilecoj sen kalkulo por pli ĝenerala indikilo.
<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>
Fonaj koloroj
Uzu niajn fonajn utilajn klasojn por rapide ŝanĝi la aspekton de insigno. Bonvolu noti, ke kiam vi uzas la defaŭltan Bootstrap .bg-light
, vi verŝajne bezonos tekstkoloran ilon kiel .text-dark
por taŭga stilo. Ĉi tio estas ĉar fonaj utilecoj starigas nenion krom background-color
.
<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>
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 .visually-hidden
klaso.
Pilolaj insignoj
Uzu la .rounded-pill
utilan klason por fari insignojn pli rondetajn kun pli granda border-radius
.
<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
Variabloj
$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;