Knap gruppe
Gruppér en række knapper sammen på en enkelt linje med knapgruppen, og forstærk dem med JavaScript.
Grundlæggende eksempel
Pak en række knapper ind .btn
med .btn-group
. Tilføj valgfri JavaScript-radio og afkrydsningsfeltstiladfærd med vores knapper-plugin .
<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>
Sørg for korrekt role
og giv en etiket
For at hjælpeteknologier (såsom skærmlæsere) kan formidle, at en række knapper er grupperet, role
skal der angives en passende egenskab. For knapgrupper vil dette være role="group"
, mens værktøjslinjer skal have en role="toolbar"
.
Derudover bør grupper og værktøjslinjer have en eksplicit etiket, da de fleste hjælpeteknologier ellers ikke vil annoncere dem på trods af tilstedeværelsen af den korrekte rolleattribut. I eksemplerne her bruger vi aria-label
, men alternativer som f.eks. aria-labelledby
kan også bruges.
Knap værktøjslinje
Kombiner sæt knapgrupper til knapværktøjslinjer for mere komplekse komponenter. Brug hjælpeklasser efter behov til at give plads til grupper, knapper og mere.
<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>
Bland gerne inputgrupper med knapgrupper i dine værktøjslinjer. I lighed med eksemplet ovenfor, har du sandsynligvis brug for nogle hjælpeprogrammer for at placere tingene ordentligt.
<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>
Dimensionering
I stedet for at anvende knapstørrelsesklasser til hver knap i en gruppe, skal du blot tilføje .btn-group-*
til hver enkelt .btn-group
, inklusive hver enkelt, når du indlejrer flere grupper.
<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>
Indlejring
Placer en .btn-group
i en anden .btn-group
, når du vil have rullemenuer blandet med en række knapper.
<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>
Lodret variation
Få et sæt knapper til at se ud lodret stablet i stedet for vandret. Rullemenuer med splitknap understøttes ikke her.
<div class="btn-group-vertical">
...
</div>