Ƙungiyar maɓalli
Haɗa jerin maɓalli tare akan layi ɗaya ko tara su a cikin ginshiƙi na tsaye.
Misali na asali
Kunna jerin maɓalli tare da .btn
ciki .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>
Tabbatar da daidai role
kuma samar da lakabi
Domin fasahar taimako (kamar masu karanta allo) don isar da cewa an haɗa jerin maɓallan, ana role
buƙatar samar da sifa mai dacewa. Ga ƙungiyoyin maɓalli, wannan zai zama role="group"
, yayin da kayan aiki ya kamata su sami role="toolbar"
.
Bugu da kari, ya kamata a bai wa kungiyoyi da sandunan kayan aiki tambari bayyananne, saboda yawancin fasahohin taimako ba za su sanar da su ba, duk da kasancewar madaidaicin sifa. A cikin misalan da aka bayar a nan, muna amfani da aria-label
, amma madadin irin su aria-labelledby
za a iya amfani da su.
Hakanan ana iya ƙara waɗannan azuzuwan zuwa ƙungiyoyin haɗin gwiwa, azaman madadin abubuwan .nav
kewayawa .
<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>
Salon gauraye
<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>
Fassarar salo
<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>
Akwatin dubawa da ƙungiyoyin maɓallin rediyo
Haɗa akwatin rajistan maɓalli da maɓallan juyawa na rediyo cikin ƙungiyar maɓalli mai kamanni mara sumul.
<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>
Maɓallin kayan aiki
Haɗa rukunin ƙungiyoyin maɓalli cikin maɓalli na kayan aiki don ƙarin hadaddun abubuwa. Yi amfani da azuzuwan masu amfani kamar yadda ake buƙata don fitar da ƙungiyoyi, maɓalli, da ƙari.
<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>
Jin kyauta don haɗa ƙungiyoyin shigarwa tare da ƙungiyoyin maɓalli a cikin sandunan kayan aikin ku. Hakazalika da misalin da ke sama, ƙila za ku buƙaci wasu kayan aiki ko da yake don sanya abubuwa yadda ya kamata.
<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>
Girman girma
Maimakon yin amfani da azuzuwan girman maɓallin maɓalli zuwa kowane maɓalli a cikin rukuni, kawai ƙara .btn-group-*
zuwa kowane .btn-group
, gami da kowane ɗaya lokacin da ake saka ƙungiyoyi masu yawa.
<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>
Gurasa
Sanya a .btn-group
cikin wani .btn-group
lokacin da kake son menu na zaɓuka gauraye da jerin maɓalli.
<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>
Bambancin tsaye
Yi saitin maɓalli ya bayyana a tsaye a tsaye maimakon a kwance. Ba a tallafawa zazzagewar maɓalli a nan.
<div class="btn-group-vertical">
...
</div>