Kooxda badhanka
Ku xidh badhamada taxane ah hal xariiq oo keliya oo wata kooxda badhanka, oo aad ugu xoog weyn iyaga oo isticmaalaya JavaScript.
Ku duub badhamada taxane ah .btn
gudaha .btn-group
. Ku dar raadiyaha JavaScript ee ikhtiyaarka ah iyo habdhaqanka qaabka sanduuqa hubinta adigoo isticmaalaya badhamadayada 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>
Xaqiiji sax role
oo bixi calaamad
Si teknoolojiyadda caawinta (sida akhristayaasha shaashadda) ay u gudbiyaan in badhamada taxane ah la kooxeeyay, role
sifo habboon ayaa loo baahan yahay in la bixiyo. Kooxaha badhanka, tani waxay noqonaysaa role="group"
, halka aaladaha ay tahay inay lahaadaan a role="toolbar"
.
Intaa waxaa dheer, kooxaha iyo aaladaha waa in la siiyaa calaamad cad, maadaama inta badan tignoolajiyada caawinta aysan ku dhawaaqi doonin iyaga, in kasta oo ay jirto sifo doorka saxda ah. Tusaalooyinka halkan lagu soo bandhigay, waxaan isticmaalnaa aria-label
, laakiin beddelka sida aria-labelledby
sidoo kale waa la isticmaali karaa.
Isku-dubarid kooxo badhanno ah oo geli baararka aaladaha badhanka ee qaybo aad u adag. Isticmaal fasallada utility sida loogu baahdo si aad meel bannaan uga saarto kooxaha, badhamada, iyo in ka badan.
<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>
Dareen xornimo inaad ku qasto kooxaha wax gelinta iyo kooxaha badhanka ee ku jira aaladahaaga. Si la mid ah tusaalaha kore, waxaad u badan tahay inaad u baahan doonto xoogaa yutiilitida ah in kastoo si sax ah wax loo meeleeyo.
<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>
Halkii aad ka codsan lahayd fasalada cabbirka badhanka badhanka kasta oo koox ah, kaliya ku dar .btn-group-*
mid kasta .btn-group
, oo ay ku jiraan mid kasta marka aad buul ka samaysanayso kooxo badan.
<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>
Meel .btn-group
kale .btn-group
geli marka aad rabto liiska hoos-u-dhaca ee lagu qasay badhammo taxane ah.
<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>
Samee badhamada u muuqda kuwo toosan oo is dulsaaran halkii ay ahaan lahaayeen kuwo toosan. Hoos u dhigida badhanka kala qaybsan halkan lagama taageero.
<div class="btn-group-vertical">
...
</div>