Itsinda rya buto
Shyira hamwe urukurikirane rwa buto hamwe kumurongo umwe cyangwa ubishyire muburyo buhagaritse.
Urugero rwibanze
Kuzuza urukurikirane rwa buto hamwe .btn
na .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>
Menya neza role
kandi utange ikirango
Kugirango tekinoroji ifasha (nkabasomyi ba ecran) kugirango yerekane ko urukurikirane rwa buto rwashyizwe hamwe, role
ikiranga gikwiye gutangwa. Kuri buto ya matsinda, ibi byaba role="group"
, mugihe ibikoresho byabigenewe bigomba kugira a role="toolbar"
.
Mubyongeyeho, amatsinda hamwe nibikoresho byifashishwa bigomba guhabwa ikirango gisobanutse, kuko tekinoroji nyinshi zifasha ntizishobora kubitangaza, nubwo hariho uruhare rukwiye rwiranga. Mu ngero zitangwa hano, turakoresha aria-label
, ariko ubundi nkibishobora aria-labelledby
gukoreshwa.
Aya masomo arashobora kandi kongerwaho mumatsinda yibihuza, nkuburyo bwo .nav
kugendana ibice .
<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>
Imisusire ivanze
<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>
Imiterere
<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>
Kugenzura agasanduku na radio ya buto
Huza buto-isa na agasanduku na radio guhinduranya buto mumatsinda asa na buto.
<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>
Umwanyabikoresho
Huza ibice bya buto mumatsinda ya buto yumurongo wibikoresho byinshi bigoye. Koresha amasomo yingirakamaro nkuko bikenewe mumwanya wo hanze amatsinda, buto, nibindi byinshi.
<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>
Wumve neza ko uvanga amatsinda yinjiza hamwe na bouton matsinda mubikoresho byawe. Bisa nurugero hejuru, birashoboka ko uzakenera ibintu bimwe na bimwe nubwo kumwanya wibintu neza.
<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>
Ingano
Aho kugirango ushyireho buto ingero zamasomo kuri buri buto mumatsinda, gusa ongeraho .btn-group-*
kuri buri .btn-group
, ushizemo buriwese mugihe utera amatsinda menshi.
<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>
Icyari
Shira a .btn-group
mubindi .btn-group
mugihe ushaka ibitonyanga bivanze nurukurikirane rwa buto.
<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>
Guhindagurika
Kora urutonde rwa buto rugaragara ruhagaritse aho gutambuka. Gutandukanya buto yamanutse ntabwo ashyigikiwe hano.
<div class="btn-group-vertical">
...
</div>