Koma bişkokê

Bi koma bişkokê re rêze bişkokan li ser yek rêzek bi hev re kom bikin, û wan bi JavaScript-ê super-hêz bikin.

Mînaka bingehîn

Rêzek bişkokên bi .btndi pêça .btn-group. Bi pêveka bişkokên me re radyoya JavaScript-a vebijarkî û şêwaza qutiya kontrolê zêde bikin.

<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>

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 roletaybetmendiyek 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-labelledbydikarin werin bikar anîn jî.

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 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>

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 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>

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-groupdi 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-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>

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>