Schëlder

Dokumentatioun an Beispiller fir Schëlder, eise klenge Grof a Label Komponente.

Op dëser Säit

Beispiller

Badges skala fir d'Gréisst vum direkten Elterendeel ze passen andeems se relativ Schrëftgréisst an emEenheeten benotzt. Zënter v5 hunn Badges net méi Fokus oder Hover Stile fir Links.

Rubriken

Beispill RubrikNei

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>

Knäppercher

Schëlder kënnen als Deel vu Linken oder Knäpper benotzt ginn fir e Konter ze bidden.

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

Bedenkt datt ofhängeg wéi se benotzt ginn, Badges fir Benotzer vun Écran Lieser an ähnlech Hëllefstechnologien duerchernee kënnen. Wärend de Styling vu Badge e visuellen Hiweis iwwer hiren Zweck gëtt, ginn dës Benotzer einfach mam Inhalt vum Badge presentéiert. Ofhängeg vun der spezifescher Situatioun, kënnen dës Schëlder wéi zoufälleg zousätzlech Wierder oder Zuelen um Enn vun engem Saz, Link oder Knäppchen schéngen.

Ausser de Kontext ass kloer (wéi mam Beispill "Notifikatiounen", wou et versteet datt de "4" d'Zuel vun den Notifikatiounen ass), betruecht zousätzlech Kontext mat engem visuell verstoppte Stéck zousätzlech Text.

Positionéiert

Benotzt Utilities fir eng z'änneren .badgean et an der Ecke vun engem Link oder Knäppchen ze positionéieren.

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>

Dir kënnt och d' .badgeKlass mat e puer méi Utilities ersetzen ouni e Grof fir e méi generesche Indikator.

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>

Hannergrond Faarwen

Dobäi an v5.2.0

Setzt e background-colormat contrastesche Virdergrond colormat eisen .text-bg-{color}Helfer . Virdrun war et erfuerderlech Är Wiel vun .text-{color}an .bg-{color}Utilities fir Styling manuell ze koppelen, déi Dir ëmmer nach benotze kënnt wann Dir et virzitt.

Primär Secondaire Erfolleg Gefor Warnung Info Liicht Däischter

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>

Bedeitung vun Hëllefstechnologien

D'Faarf benotze fir Bedeitung ze addéieren gëtt nëmmen eng visuell Indikatioun, déi net un d'Benotzer vun Assistenztechnologien vermëttelt gëtt - sou wéi Écran Lieser. Vergewëssert Iech datt d'Informatioun, déi mat der Faarf bezeechent gëtt, entweder offensichtlech aus dem Inhalt selwer ass (zB dem siichtbaren Text), oder duerch alternativ Mëttelen abegraff ass, sou wéi zousätzlech Text verstoppt mat der .visually-hiddenKlass.

Pille Badges

Benotzt d' .rounded-pillUtility-Klass fir Badge méi ofgerënnt mat enger méi grousser border-radius.

Primär Secondaire Erfolleg Gefor Warnung Info Liicht Däischter

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

Variablen

Dobäi an v5.2.0

Als Deel vun der Entwécklung vu Bootstrap CSS Variablen Approche, benotzen Badges elo lokal CSS Variablen op .badgefir eng verstäerkte Echtzäit Personnalisatioun. Wäerter fir d'CSS Variablen ginn iwwer Sass gesat, sou datt Sass Personnalisatioun och nach ëmmer ënnerstëtzt gëtt.

  --#{$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 Variablen

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