Source

Grupo sa butones

Paggrupo ang serye sa mga buton sa usa ka linya nga adunay grupo sa butones, ug kusog kaayo kini gamit ang JavaScript.

Panguna nga pananglitan

I-wrap ang usa ka serye sa mga buton gamit ang .btnin .btn-group. Idugang ang opsyonal nga JavaScript radio ug checkbox style behavior gamit ang among buttons 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>
Siguruha nga husto roleug paghatag usa ka label

Aron ang mga teknolohiya sa pagtabang (sama sa mga magbabasa sa screen) makapahayag nga usa ka serye sa mga buton ang gi-grupo, usa ka angay rolenga kinaiya kinahanglan nga ihatag. Alang sa mga grupo sa butones, kini mao ang role="group", samtang ang mga toolbar kinahanglan adunay usa ka role="toolbar".

Dugang pa, ang mga grupo ug mga toolbar kinahanglan nga hatagan usa ka tin-aw nga label, tungod kay ang kadaghanan sa mga teknolohiya nga makatabang nga dili kini ipahibalo, bisan pa sa presensya sa husto nga hiyas sa papel. Sa mga pananglitan nga gihatag dinhi, among gigamit ang aria-label, apan ang mga alternatibo sama sa aria-labelledbymagamit usab.

Butang nga toolbar

Paghiusa sa mga set sa mga grupo sa butones ngadto sa mga toolbar sa buton alang sa mas komplikado nga mga sangkap. Gamita ang mga klase sa utility kung gikinahanglan aron mapalayo ang mga grupo, buton, ug uban pa.

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

Mobati nga gawasnon sa pagsagol sa mga grupo sa input sa mga grupo sa butones sa imong mga toolbar. Sama sa pananglitan sa ibabaw, lagmit kinahanglan nimo ang pipila ka mga utilities bisan pa aron mabutang ang mga butang sa hustong paagi.

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

Pagsukod

Imbis nga i-apply ang mga klase sa pag-size sa butones sa matag buton sa usa ka grupo, idugang lang .btn-group-*ang matag usa .btn-group, lakip ang matag usa kung magsalag sa daghang mga grupo.



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

Nagsalag

Ibutang ang usa .btn-groupsa sulod sa lain .btn-groupkung gusto nimo ang mga dropdown menu nga gisagol sa usa ka serye sa mga buton.

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

Bertikal nga kalainan

Himoa nga ang usa ka hugpong sa mga buton makita nga patindog nga gipatong kay sa pinahigda. Ang mga dropdown sa split button wala gisuportahan dinhi.

Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link 
<div class="btn-group-vertical">
  ...
</div>