Kentekens

Dokumentasie en voorbeelde vir kentekens, ons kleintelling en etikettering komponent.

Voorbeeld

Kentekens skaal om by die grootte van die onmiddellike ouerelement te pas deur relatiewe lettergrootte en emeenhede te gebruik.

Voorbeeld opskrifNuut

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

Kentekens kan gebruik word as deel van skakels of knoppies om 'n teller te verskaf.

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

Let daarop dat, afhangende van hoe dit gebruik word, kentekens verwarrend kan wees vir gebruikers van skermlesers en soortgelyke ondersteunende tegnologieë. Terwyl die stilering van kentekens 'n visuele aanduiding gee van hul doel, sal hierdie gebruikers bloot die inhoud van die kenteken aangebied word. Afhangende van die spesifieke situasie, kan hierdie kentekens lyk soos willekeurige bykomende woorde of syfers aan die einde van 'n sin, skakel of knoppie.

Tensy die konteks duidelik is (soos met die "Kennisgewings"-voorbeeld, waar dit verstaan word dat die "4" die aantal kennisgewings is), oorweeg dit om addisionele konteks met 'n visueel versteekte stuk addisionele teks in te sluit.

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

Kontekstuele variasies

Voeg enige van die wysigerklasse hieronder by om die voorkoms van 'n kenteken te verander.

Primêr Sekondêr Sukses Gevaar Waarskuwing Inligting Lig Donker

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

Dra betekenis aan ondersteunende tegnologieë oor

Die gebruik van kleur om betekenis toe te voeg, verskaf slegs 'n visuele aanduiding, wat nie aan gebruikers van ondersteunende tegnologieë – soos skermlesers – oorgedra sal word nie. Maak seker dat inligting wat deur die kleur aangedui word óf duidelik uit die inhoud self (bv. die sigbare teks), óf op alternatiewe wyse ingesluit word, soos bykomende teks wat by die .sr-onlyklas versteek is.

Pillekentekens

Gebruik die .badge-pillwysigerklas om kentekens meer afgerond te maak (met 'n groter border-radiusen bykomende horisontale padding). Nuttig as jy die kentekens van v3 mis.

Primêr Sekondêr Sukses Gevaar Waarskuwing Inligting Lig Donker

<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

Skakels

Deur die kontekstuele .badge-*klasse op 'n <a>element te gebruik, verskaf vinnig bruikbare kentekens met sweef- en fokustoestande.

Primêr Sekondêr Sukses Gevaar Waarskuwing Inligting Lig Donker

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>