Source

Grupo ng pindutan

Pagsama-samahin ang isang serye ng mga button sa isang linya kasama ang button group, at palakasin ang mga ito gamit ang JavaScript.

Pangunahing halimbawa

I-wrap ang isang serye ng mga button na may .btnin .btn-group. Idagdag sa opsyonal na JavaScript radio at pag-uugali sa istilo ng checkbox gamit ang aming mga button na 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>
Tiyaking tama roleat magbigay ng label

Upang maiparating ng mga pantulong na teknolohiya (gaya ng mga screen reader) na nakagrupo ang isang serye ng mga button, rolekailangang magbigay ng naaangkop na katangian. Para sa mga pangkat ng button, ito ay magiging role="group", habang ang mga toolbar ay dapat may role="toolbar".

Bilang karagdagan, ang mga pangkat at toolbar ay dapat na bigyan ng isang tahasang label, dahil karamihan sa mga teknolohiyang pantulong ay hindi mag-aanunsyo sa kanila, sa kabila ng pagkakaroon ng tamang katangian ng tungkulin. Sa mga halimbawang ibinigay dito, ginagamit namin ang aria-label, ngunit magagamit din ang mga alternatibo tulad ng aria-labelledby.

Toolbar ng pindutan

Pagsamahin ang mga hanay ng mga pangkat ng button sa mga toolbar ng button para sa mas kumplikadong mga bahagi. Gumamit ng mga utility class kung kinakailangan para i-space out ang mga grupo, button, at higit 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>

Huwag mag-atubiling paghaluin ang mga pangkat ng input sa mga pangkat ng button sa iyong mga toolbar. Katulad ng halimbawa sa itaas, malamang na kailangan mo ng ilang mga utility bagaman para maayos ang mga bagay.

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

Pagsusukat

Sa halip na ilapat ang mga klase sa pagpapalaki ng button sa bawat button sa isang grupo, idagdag lang .btn-group-*ang bawat .btn-groupisa , kasama ang bawat isa kapag naglalagay ng maraming 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>

Pugad

Maglagay ng isang sa .btn-grouploob ng isa pa .btn-groupkapag gusto mo ang mga dropdown na menu na may halong serye ng mga button.

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

Vertical variation

Gawing patayong nakasalansan ang isang hanay ng mga button sa halip na pahalang. Hindi sinusuportahan dito ang mga split button na dropdown.

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