Knoppie groep
Groepeer 'n reeks knoppies saam op 'n enkele lyn met die knoppiegroep, en versterk hulle met JavaScript.
Draai 'n reeks knoppies toe met .btn
in .btn-group
. Voeg opsionele JavaScript-radio- en merkblokkie-stylgedrag by met ons knoppies-inprop .
<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>
Verseker korrek role
en verskaf 'n etiket
Ten einde hulptegnologieë (soos skermlesers) oor te dra dat 'n reeks knoppies gegroepeer is, moet 'n toepaslike role
kenmerk verskaf word. Vir knoppiegroepe sal dit wees role="group"
, terwyl nutsbalke 'n role="toolbar"
.
Daarbenewens moet groepe en nutsbalke 'n eksplisiete etiket gegee word, aangesien die meeste hulptegnologieë hulle andersins nie sal aankondig nie, ten spyte van die teenwoordigheid van die korrekte rolkenmerk. In die voorbeelde wat hier verskaf word, gebruik ons aria-label
, maar alternatiewe soos aria-labelledby
kan ook gebruik word.
Kombineer stelle knoppiegroepe in knoppienutsbalke vir meer komplekse komponente. Gebruik nutsklasse soos nodig om groepe, knoppies en meer uit te spasieer.
<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>
Meng gerus insetgroepe met knoppiegroepe in jou nutsbalke. Soortgelyk aan die voorbeeld hierbo, sal jy waarskynlik 'n paar hulpmiddels nodig hê om dinge behoorlik te spasieer.
<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>
In plaas daarvan om knoppiegrootteklasse op elke knoppie in 'n groep toe te pas, voeg net by .btn-group-*
elkeen .btn-group
, insluitend elkeen wanneer verskeie groepe nesgemaak word.
<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>
Plaas 'n .btn-group
in 'n ander .btn-group
wanneer jy aftrekkieslys gemeng wil hê met 'n reeks knoppies.
<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 id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
Laat 'n stel knoppies vertikaal gestapel vertoon eerder as horisontaal. Verdeelknoppie-aftrekkies word nie hier ondersteun nie.
<div class="btn-group-vertical">
...
</div>