Badges

Dokumintaasje en foarbylden foar badges, ús lytse telling en labeling komponint.

Op dizze side

Foarbylden

Badges skaalje om te passen by de grutte fan it direkte âlderelemint troch relative lettertypegrutte en emienheden te brûken. Fanôf v5 hawwe badges gjin fokus- of hoverstilen mear foar keppelings.

Headings

Foarbyld headingNij

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

Knoppen

Badges kinne brûkt wurde as ûnderdiel fan keppelings as knoppen om in teller te leverjen.

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

Tink derom dat ôfhinklik fan hoe't se wurde brûkt, badges kinne betiizjend wêze foar brûkers fan skermlêzers en ferlykbere assistive technologyen. Wylst de styling fan badges in fisuele oanwizing leveret oer har doel, sille dizze brûkers gewoan de ynhâld fan 'e badge wurde presintearre. Ofhinklik fan 'e spesifike situaasje kinne dizze badges lykje as willekeurige ekstra wurden of sifers oan' e ein fan in sin, keppeling of knop.

Behalven as de kontekst dúdlik is (lykas by it foarbyld "Notifikaasjes", wêr't it wurdt begrepen dat de "4" it oantal notifikaasjes is), beskôgje dan ekstra kontekst op te nimmen mei in visueel ferburgen stik ekstra tekst.

Gepositioneerd

Brûk nutsbedriuwen om in te feroarjen .badgeen te pleatsen yn 'e hoeke fan in keppeling of knop.

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

Jo kinne ek ferfange de .badgeklasse mei in pear mear nutsbedriuwen sûnder in greve foar in mear generike yndikator.

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

Eftergrûnkleuren

Brûk ús eftergrûnprogrammaklassen om it uterlik fan in badge fluch te feroarjen. Tink derom dat by it brûken fan Bootstrap's standert .bg-light, jo wierskynlik in tekstkleurhelpmiddel nedich hawwe lykas .text-darkfoar juste styling. Dit komt om't eftergrûnhulpprogramma's neat oars ynstelle as background-color.

Primêr Sekundêr Sukses Gefaar Warskôging Info Ljocht Tsjuster

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

Betsjutting oerbringe oan assistinte technologyen

It brûken fan kleur om betsjutting ta te foegjen jout allinich in fisuele yndikaasje, dy't net sil wurde oerbrocht oan brûkers fan assistinte technologyen - lykas skermlêzers. Soargje derfoar dat ynformaasje oanjûn troch de kleur óf dúdlik is út de ynhâld sels (bgl. de sichtbere tekst), óf wurdt opnommen troch alternative middels, lykas ekstra tekst ferburgen mei de .visually-hiddenklasse.

Pille badges

Brûk de .rounded-pillnutsklasse om badges mear rûn te meitsjen mei in gruttere border-radius.

Primêr Sekundêr Sukses Gefaar Warskôging Info Ljocht Tsjuster

<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

Fariabelen

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