Source

Gulu la batani

Gwirizanitsani mabatani angapo pamzere umodzi ndi gulu la mabatani, ndikuwalimbitsa kwambiri ndi JavaScript.

Chitsanzo choyambirira

Manga mabatani angapo ndi .btnmu .btn-group. Onjezani pa wayilesi ya JavaScript yosankha komanso mawonekedwe a bokosi ndi mabatani athu owonjezera .

<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>
Onetsetsani kuti mwalondola rolendikupereka chizindikiro

Kuti matekinoloje othandizira (monga owerenga skrini) awonetse kuti mabatani angapo agawidwa m'magulu, rolemuyenera kuperekedwa mawonekedwe oyenera. Kwa magulu a mabatani, izi zitha kukhala role="group", pomwe zida zogwiritsira ntchito ziyenera kukhala ndi role="toolbar".

Kuonjezera apo, magulu ndi zida ziyenera kupatsidwa chizindikiro chomveka bwino, chifukwa matekinoloje ambiri othandizira sangawalengeze, ngakhale pali mbali yoyenera. Mu zitsanzo zomwe zaperekedwa apa, timagwiritsa ntchito aria-label, koma njira zina aria-labelledbyzomwe zingagwiritsidwe ntchito.

Dinani batani la zida

Phatikizani magulu amagulu a batani kukhala mabatani a zida zamagulu ovuta kwambiri. Gwiritsani ntchito makalasi ofunikira ngati pakufunika kugawa magulu, mabatani, ndi zina zambiri.

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

Khalani omasuka kusakaniza magulu olowa ndi magulu a mabatani muzitsulo zanu. Mofanana ndi chitsanzo pamwambapa, mungafunike zina zothandizira kuti muyike zinthu moyenera.

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

Kukula

M'malo mogwiritsa ntchito makalasi owerengera mabatani pa batani lililonse pagulu, ingowonjezerani .btn-group-*pa chilichonse .btn-group, kuphatikiza chilichonse mukamanga magulu angapo.



<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

Ikani .btn-groupmkati mwa ina .btn-grouppamene mukufuna mindandanda yotsitsa yosakanikirana ndi mabatani angapo.

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

Kusintha koyima

Pangani mabatani angapo kuti awoneke ngati atayikidwa molunjika osati mopingasa. Kutsikira kwa mabatani ogawanika sikutheka pano.

Ulalo wotsitsa Ulalo wotsitsa
Ulalo wotsitsa Ulalo wotsitsa
Ulalo wotsitsa Ulalo wotsitsa
Ulalo wotsitsa Ulalo wotsitsa 
<div class="btn-group-vertical">
  ...
</div>