Kentekens

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

Op hierdie bladsy

Voorbeelde

Kentekens skaal om by die grootte van die onmiddellike ouerelement te pas deur relatiewe lettergrootte en emeenhede te gebruik. Vanaf v5 het kentekens nie meer fokus- of sweefstyle vir skakels nie.

Opskrifte

Voorbeeld opskrifNuut

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

Knoppies

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 bg-secondary">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.

Geposisioneer

Gebruik nutsprogramme om 'n te wysig .badgeen plaas dit in die hoek van 'n skakel of knoppie.

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

Jy kan ook die .badgeklas vervang met 'n paar meer nutsprogramme sonder 'n telling vir 'n meer generiese aanwyser.

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

Agtergrond kleure

Gebruik ons agtergrondnutsklasse om die voorkoms van 'n kenteken vinnig te verander. Neem asseblief kennis dat wanneer u Bootstrap se verstek gebruik .bg-light, u waarskynlik 'n tekskleurhulpmiddel benodig soos .text-darkvir behoorlike stilering. Dit is omdat agtergrondnutsprogramme niks anders stel as background-color.

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

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

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 .visually-hiddenklas versteek is.

Pillekentekens

Gebruik die .rounded-pillnutsklas om kentekens meer afgerond te maak met 'n groter border-radius.

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

<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

Veranderlikes

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