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

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

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

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

<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

Gebruik onze achtergrondprogrammaklassen om het uiterlijk van een badge snel te wijzigen. Houd er rekening mee dat wanneer u de standaardinstelling van Bootstrap gebruikt .bg-light, u waarschijnlijk een hulpprogramma voor tekstkleur nodig heeft, zoals .text-darkvoor de juiste stijl. Dit komt omdat achtergrondhulpprogramma's niets anders instellen dan background-color.

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

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

<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

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;