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

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Pill badges

Use the .rounded-pill utility class to make badges more rounded with a larger border-radius.

Primary Secondary Success Danger Warning Info Light Dark

<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

Variables

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