Gruppu di buttone
Gruppu una seria di buttoni inseme nantu à una sola linea cù u gruppu di buttone, è super-powered elli cù JavaScript.
Esempiu basicu
Avvolgi una seria di buttoni cù .btn
in .btn-group
. Aghjunghjite nantu à a radiu JavaScript opzionale è u cumpurtamentu di stile di checkbox cù u nostru plugin di buttoni .
<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>
Assicurà curretta role
è furnisce una etichetta
Per esse tecnulugii assistivi (cum'è i lettori di schermu) per trasmette chì una seria di buttoni hè raggruppata, un role
attributu appropritatu deve esse furnitu. Per i gruppi di buttone, questu seria role="group"
, mentre chì i toolbars duveranu avè un role="toolbar"
.
Inoltre, i gruppi è i toolbars anu da esse datu una etichetta esplicita, cum'è a maiò parte di e tecnulugii d'assistenza ùn anu micca annunziatu, malgradu a presenza di l'attributu di rolu currettu. In l'esempii furniti quì, usemu aria-label
, ma alternative cum'è aria-labelledby
ponu ancu esse usate.
Barra di strumenti di buttone
Unisce gruppi di gruppi di buttone in barre di strumenti di buttone per cumpunenti più cumplessi. Aduprate classi di utilità cum'è necessariu per spazià i gruppi, i buttoni è più.
<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>
Sentite liberu di mischjà gruppi di input cù gruppi di buttone in i vostri toolbars. Simile à l'esempiu sopra, probabilmente avete bisognu di qualchì utilità per spazzà e cose bè.
<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>
Misure
Invece di applicà e classi di dimensionamentu di i buttoni à ogni buttone in un gruppu, aghjunghje solu .btn-group-*
à ognunu .btn-group
, cumpresu ognuna quandu nesting parechji gruppi.
<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>
Nidificazione
Mettite un .btn-group
in un altru .btn-group
quandu vulete menu dropdown mischiati cù una seria di buttone.
<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>
Variazione verticale
Fate chì un inseme di buttuni apparisce verticalmente in pila invece di orizontali. I menu dropdown di u buttone Split ùn sò micca supportati quì.
<div class="btn-group-vertical">
...
</div>