Insignoj

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

Sur ĉi tiu paĝo

Ekzemploj

Insignoj skalas por kongrui kun la grandeco de la tuja gepatra elemento uzante relativajn tipargrandecon kaj emunuojn. Ekde v5, insignoj ne plu havas fokusajn aŭ ŝvebajn stilojn por ligiloj.

Titoloj

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 .badgekaj 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 .badgeklason 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-darkpor taŭga stilo. Ĉi tio estas ĉar fonaj utilecoj starigas nenion krom background-color.

Primaraj Sekundara Sukceso Danĝero Averto Info Lumo Mallumo

<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ŭ evidentaj el la enhavo mem (ekz. la videbla teksto), aŭ estas inkluzivitaj per alternativaj rimedoj, kiel aldona teksto kaŝita kun la .visually-hiddenklaso.

Pilolaj insignoj

Uzu la .rounded-pillutilan klason por fari insignojn pli rondetajn kun pli granda border-radius.

Primaraj Sekundara Sukceso Danĝero Averto Info Lumo Mallumo

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