Knop groep
Groepeer een reeks knoppen op één regel met de knopgroep en maak ze superkrachtig met JavaScript.
Basis voorbeeld
Wikkel een reeks knopen in met .btn
in .btn-group
. Voeg optioneel JavaScript-radio en checkbox-stijlgedrag toe met onze plug-in voor knoppen .
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
Zorg voor correct role
en geef een label op
Om ervoor te zorgen dat ondersteunende technologieën (zoals schermlezers) aangeven dat een reeks knoppen is gegroepeerd, moet een geschikt role
attribuut worden opgegeven. Voor knopgroepen is dit role="group"
, terwijl werkbalken een role="toolbar"
.
Daarnaast moeten groepen en werkbalken een expliciet label krijgen, omdat de meeste ondersteunende technologieën ze anders niet zullen aankondigen, ondanks de aanwezigheid van het juiste rolattribuut. In de hier gegeven voorbeelden gebruiken we aria-label
, maar alternatieven zoals die aria-labelledby
kunnen ook worden gebruikt.
Knop werkbalk
Combineer sets met knopgroepen in knopwerkbalken voor complexere componenten. Gebruik zo nodig hulpprogrammaklassen om groepen, knoppen en meer te verdelen.
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-secondary">8</button>
</div>
</div>
Voel je vrij om inputgroepen te mixen met knopgroepen in je werkbalken. Net als in het bovenstaande voorbeeld, heb je waarschijnlijk enkele hulpprogramma's nodig om dingen op de juiste manier te plaatsen.
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">@</div>
</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
</div>
</div>
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon2">@</div>
</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
</div>
</div>
Maatvoering
In plaats van klassen voor knopgrootte toe te passen op elke knop in een groep, voegt u gewoon toe .btn-group-*
aan elke .btn-group
, inclusief elke wanneer u meerdere groepen nest.
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
Nesten
Plaats een .btn-group
in een andere .btn-group
wanneer u vervolgkeuzemenu's wilt vermengen met een reeks knoppen.
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
Verticale variatie
Laat een set knoppen verticaal gestapeld lijken in plaats van horizontaal. Dropdownmenu's met gesplitste knoppen worden hier niet ondersteund.
<div class="btn-group-vertical">
...
</div>