Insignes
Documentatie en voorbeelden voor badges, onze kleine telling en etiketteringscomponent.
Voorbeelden
Badges worden geschaald om overeen te komen met de grootte van het direct bovenliggende element door gebruik te maken van relatieve lettergrootte en em
eenheden. Vanaf v5 hebben badges geen focus- of zweefstijlen meer voor links.
Koppen
Voorbeeld kopNieuw
Voorbeeld kopNieuw
Voorbeeld kopNieuw
Voorbeeld kopNieuw
Voorbeeld kopNieuw
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 .badge
en 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 .badge
klasse 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-dark
voor de juiste stijl. Dit komt omdat achtergrondhulpprogramma's niets anders instellen dan background-color
.
<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-hidden
klasse.
Pil badges
Gebruik de .rounded-pill
utility-klasse om badges ronder te maken met een groter border-radius
.
<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;