Source

Itsinda rya buto

Shyira hamwe urukurikirane rwa buto hamwe kumurongo umwe hamwe na bouton itsinda, hanyuma super-power hamwe na JavaScript.

Urugero rwibanze

Kuzuza urukurikirane rwa buto hamwe .btnna .btn-group. Ongeraho kuri radio ya JavaScript idahwitse hamwe na cheque yimiterere yimyitwarire hamwe na buto yacu 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>
Menya neza rolekandi utange ikirango

Kugirango tekinoroji ifasha (nkabasomyi ba ecran) kugirango yerekane ko urukurikirane rwa buto rwashyizwe hamwe, roleikiranga 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-labelledbygukoreshwa.

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

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

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-groupmubindi .btn-groupmugihe ushaka ibitonyanga bivanze nurukurikirane rwa buto.

Ihuza ry'ibitonyanga Ihuza ry'ibitonyanga 
<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>

Guhindagurika

Kora urutonde rwa buto rugaragara ruhagaritse aho gutambuka. Gutandukanya buto yamanutse ntabwo ashyigikiwe hano.

Ihuza ry'ibitonyanga Ihuza ry'ibitonyanga
Ihuza ry'ibitonyanga Ihuza ry'ibitonyanga
Ihuza ry'ibitonyanga Ihuza ry'ibitonyanga
Ihuza ry'ibitonyanga Ihuza ry'ibitonyanga 
<div class="btn-group-vertical">
  ...
</div>