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

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>

Butonoj

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

html

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

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>

Vi ankaŭ povas anstataŭigi la .badgeklason per kelkaj pli da utilecoj sen kalkulo por pli ĝenerala indikilo.

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>

Fonaj koloroj

Aldonita en v5.2.0

Metu a background-colorkun kontrasta malfono colorkun niaj .text-bg-{color}helpantoj . Antaŭe oni bezonis mane kunigi vian elekton .text-{color}kaj .bg-{color}ilojn por stilado, kiujn vi ankoraŭ povas uzi se vi preferas.

Primaraj Sekundara Sukceso Danĝero Averto Info Lumo Mallumo

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>

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

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

Variabloj

Aldonita en v5.2.0

Kiel parto de la aliro al evoluantaj CSS-variabloj de Bootstrap, insignoj nun uzas lokajn CSS .badge-variablojn por plibonigita realtempa personigo. Valoroj por la CSS-variabloj estas fiksitaj per Sass, do ankaŭ Sass-adaptigo ankoraŭ estas subtenata.

  --#{$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};

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;