Insignes

Documentatie en voorbeelden voor badges, onze kleine telling en etiketteringscomponent.

Op deze pagina

Voorbeelden

Badges worden geschaald om overeen te komen met de grootte van het direct bovenliggende element door gebruik te maken van relatieve lettergrootte en emeenheden. Vanaf v5 hebben badges geen focus- of zweefstijlen meer voor links.

Koppen

Voorbeeld kopNieuw

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>

Toetsen

Badges kunnen worden gebruikt als onderdeel van links of knoppen om een teller te bieden.

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

Houd er rekening mee dat, afhankelijk van hoe ze worden gebruikt, badges verwarrend kunnen zijn voor gebruikers van schermlezers en vergelijkbare ondersteunende technologieën. Hoewel de vormgeving van badges een visuele indicatie geeft van hun doel, krijgen deze gebruikers gewoon de inhoud van de badge te zien. Afhankelijk van de specifieke situatie kunnen deze badges lijken op willekeurige extra woorden of cijfers aan het einde van een zin, link of knop.

Tenzij de context duidelijk is (zoals bij het voorbeeld 'Meldingen', waarbij duidelijk is dat de '4' het aantal meldingen is), overweeg dan om extra context op te nemen met een visueel verborgen stukje extra tekst.

gepositioneerd

Gebruik hulpprogramma's om a te wijzigen .badgeen in de hoek van een link of knop te plaatsen.

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>

Je kunt de .badgeklasse ook vervangen door nog een paar hulpprogramma's zonder te tellen voor een meer algemene indicator.

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>

Achtergrondkleuren

Toegevoegd in v5.2.0

Stel een background-colormet contrasterende voorgrond colorin met onze .text-bg-{color}helpers . Voorheen was het nodig om uw keuze van .text-{color}en .bg-{color}hulpprogramma's handmatig te koppelen voor styling, die u nog steeds kunt gebruiken als u dat wilt.

primair Ondergeschikt Succes Gevaar Waarschuwing Info Licht 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>

Betekenis overbrengen aan ondersteunende technologieën

Het gebruik van kleur om betekenis toe te voegen geeft alleen een visuele indicatie, die niet wordt overgebracht aan gebruikers van ondersteunende technologieën, zoals schermlezers. Zorg ervoor dat informatie die wordt aangegeven met de kleur ofwel duidelijk is uit de inhoud zelf (bijv. de zichtbare tekst), of op alternatieve manieren wordt opgenomen, zoals extra tekst die verborgen is bij de .visually-hiddenklasse.

Pil badges

Gebruik de .rounded-pillutility-klasse om badges ronder te maken met een groter border-radius.

primair Ondergeschikt Succes Gevaar Waarschuwing Info Licht 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

Variabelen

Toegevoegd in v5.2.0

Als onderdeel van Bootstrap's evoluerende benadering van CSS-variabelen, gebruiken badges nu lokale CSS .badge-variabelen voor verbeterde realtime aanpassingen. Waarden voor de CSS-variabelen worden ingesteld via Sass, dus Sass-aanpassing wordt ook nog steeds ondersteund.

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

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