Koma bişkokê
Rêze bişkokan li ser yek rêzek bi hev re kom bikin an wan di stûnek vertîkal de bixin.
Mînaka bingehîn
Rêzek bişkokên bi .btn
di pêça .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>
Rast bikin role
û etîketek peyda bikin
Ji bo ku teknolojiyên arîkar (wek xwendevanên ekranê) ragihînin ku rêzek bişkok têne kom kirin, pêdivî ye ku role
taybetmendiyek guncan were peyda kirin. Ji bo komên bişkojk, ev dê bibe role="group"
, di heman demê de ku darikên amûran divê xwedî a role="toolbar"
.
Digel vê yekê, divê grûb û toolbar bi etîketek eşkere were dayîn, ji ber ku piraniya teknolojiyên arîkar dê wekî din wan ragihînin, tevî hebûna taybetmendiya rola rast. Di mînakên ku li vir têne pêşkêş kirin de, em bikar tînin aria-label
, lê alternatîfên wekî aria-labelledby
dikarin werin bikar anîn jî.
Van ders dikarin li komên girêdanan jî werin zêdekirin, wekî alternatîfek ji .nav
hêmanên navîgasyonê re.
<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>
Şêweyên tevlihev
<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>
Şêweyên diyarkirî
<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>
Komên qutiya kontrolê û bişkojka radyoyê
Qutiya kontrolê ya mîna bişkokê û bişkokên guheztina radyoyê di komek bişkokê ya bêkêmasî de bi hev re bikin.
<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>
Bişkojka toolbar
Ji bo hêmanên tevlihevtir komek komên bişkokê li darikên bişkokê bidin hev. Li gorî hewcedariyê dersên karûbar bikar bînin da ku kom, bişkok û hêj bêtir vala bikin.
<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>
Bi dilxwazî hûn komên têketinê bi komên bişkokê re di nav darikên xwe de tevlihev bikin. Mîna mînaka li jor, hûn ê îhtîmala ku ji bo cîhkirina tiştan bi rêkûpêk bi cîh bikin jî hewceyê hin amûran bin.
<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>
Mezinbûn
Li şûna ku hûn dersên mezinbûna bişkokê li her bişkokek di komekê de bicîh bikin, tenê li her bişkokê zêde .btn-group-*
bikin .btn-group
, di nav de her yekê dema ku gelek koman hêlîn dikin.
<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>
Nesting
Dema ku hûn dixwazin pêşekên dakêşanê bi rêzek bişkokan re tevlihev bibin, .btn-group
di nav yekî din de cîh bikin..btn-group
<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>
Guhertoya vertîkal
Komek bişkokan li şûna horizontî, vertîkal li ser hev xuya bikin. Daxistina bişkojka dabeşkirinê li vir nayê piştgirî kirin.
<div class="btn-group-vertical">
...
</div>