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

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

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

Positionéiert

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

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

<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

Benotzt eis Background Utility Klassen fir séier d'Erscheinung vun engem Badge z'änneren. Notéiert w.e.g. datt wann Dir Bootstrap's Standard benotzt .bg-light, Dir wäert méiglecherweis en Textfaarf Utility brauchen wéi .text-darkfir richteg Styling. Dëst ass well Background Utilities näischt astellen wéi background-color.

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

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

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

<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

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;