Groupe ya ba boutons
Sangisa molɔngɔ́ ya ba boutons esika moko na molɔngɔ́ moko to tyá yango na molɔngɔ́ ya semba.
Ndakisa ya moboko
Envelopper série ya ba boutons na .btn
in .btn-group
.
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
Salá ete ezali malamu role
mpe pesa elembo
Mpo ete mayele ya kosalisa (na ndakisa batángi ya écran) emonisa ete molɔngɔ ya ba boutons esangisi, esengeli role
kopesa ezaleli oyo ebongi. Mpo na bituluku ya ba boutons, oyo ekozala role="group"
, nzokande ba barres ya bisaleli esengeli kozala na role="toolbar"
.
En plus, esengeli kopesa ba groupes na ba barres d’outils étiquette ya polele, lokola mingi ya ba technologies d’assistance ekosakola yango te, malgré présence ya attribut ya rôle correct. Na bandakisa oyo epesami awa, tosalelaka aria-label
, kasi banzela mosusu lokola aria-labelledby
ekoki mpe kosalelama.
Ba classes oyo ekoki pe kobakisama na ba groupes ya ba liens, comme alternative na ba .nav
composants ya navigation .
<div class="btn-group">
<a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
<a href="#" class="btn btn-primary">Link</a>
<a href="#" class="btn btn-primary">Link</a>
</div>
Mitindo ya kosangisa
<div class="btn-group" role="group" aria-label="Basic mixed styles example">
<button type="button" class="btn btn-danger">Left</button>
<button type="button" class="btn btn-warning">Middle</button>
<button type="button" class="btn btn-success">Right</button>
</div>
Ba styles oyo elakisami
<div class="btn-group" role="group" aria-label="Basic outlined example">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
</div>
Boîte de coche mpe ba groupes ya bouton ya radio
Sangisa esika ya kotiya elembo oyo ezali lokola bouton mpe ba boutons ya kobongola radio na etuluku ya ba boutons oyo ezali komonana malamu te.
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>
Barre ya bisaleli ya bouton
Sangisa ba ensembles ya ba groupes ya ba boutons na ba barres d'outils ya ba boutons pona ba composants complexes mingi. Salelá bakelasi ya utilité soki esengeli mpo na kopesa esika na bituluku, ba boutons, mpe makambo mosusu.
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
<div class="btn-group me-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-info">8</button>
</div>
</div>
Bozala na bonsomi ya kosangisa bituluku ya bokoti na bituluku ya bouton na ba barres ya bisaleli na bino. Ndenge moko na ndakisa oyo ezali likolo, okozala mbala mosusu na mposa ya mwa ba utilitaires atako mpo na esika makambo malamu.
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-secondary">1</button>
<button type="button" class="btn btn-outline-secondary">2</button>
<button type="button" class="btn btn-outline-secondary">3</button>
<button type="button" class="btn btn-outline-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-text" id="btnGroupAddon">@</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-outline-secondary">1</button>
<button type="button" class="btn btn-outline-secondary">2</button>
<button type="button" class="btn btn-outline-secondary">3</button>
<button type="button" class="btn btn-outline-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-text" id="btnGroupAddon2">@</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
</div>
</div>
Kosala bonene ya biloko
Na esika ya kosalela bakelasi ya bonene ya bouton na bouton nyonso na kati ya etuluku, bakisa kaka .btn-group-*
na moko na moko .btn-group
, bakisa mpe moko na moko ntango ozali kosala yango na bituluku mingi.
<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>
Kosala zumbu
Tia moko na .btn-group
kati ya mosusu .btn-group
ntango olingi ba menu oyo ezali kokita esangana na molɔngɔ ya ba boutons.
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
</div>
Bokeseni ya semba
Salá ete ensemble ya ba boutons emonana ebelemi na verticale na esika ya kozala horizontalement. Ba déroulants ya bouton ya kokabola esimbami awa te.
<div class="btn-group-vertical">
...
</div>