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

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>

Knoppen

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

html

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

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>

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

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>

Eftergrûnkleuren

Taheakke yn v5.2.0

Stel in background-colormei kontrastearjende foargrûn colormei ús .text-bg-{color}helpers . Earder wie it ferplichte om jo keuze .text-{color}en .bg-{color}nutsfoarsjenningen foar styling manuell te koppelen, dy't jo noch kinne brûke as jo leaver.

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

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>

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

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

Fariabelen

Taheakke yn v5.2.0

As ûnderdiel fan Bootstrap's evoluearjende oanpak fan CSS-fariabelen, brûke badges no lokale CSS-fariabelen op .badgefoar ferbettere real-time oanpassing. Wearden foar de CSS-fariabelen wurde ynsteld fia Sass, sadat Sass-oanpassing ek noch stipe wurdt.

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