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

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>

Knoppies

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

html

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

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>

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

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>

Agtergrond kleure

Bygevoeg in v5.2.0

Stel 'n background-colormet kontrasterende voorgrond colorsaam met ons .text-bg-{color}helpers . .text-{color}Voorheen was dit nodig om jou keuse van en hulpmiddels vir stilering handmatig te koppel .bg-{color}, wat jy steeds kan gebruik as jy verkies.

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

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>

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

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

Veranderlikes

Bygevoeg in v5.2.0

As deel van Bootstrap se ontwikkelende CSS-veranderlikebenadering, gebruik kentekens nou plaaslike CSS-veranderlikes .badgevir verbeterde intydse aanpassing. Waardes vir die CSS-veranderlikes word via Sass ingestel, dus word Sass-aanpassing ook steeds ondersteun.

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