Source

Grupo ti buton

Grupoen ti serye dagiti buton a sangsangkamaysa iti maymaysa a linia iti grupo ti buton, ken super-power dagitoy babaen ti JavaScript.

Pangrugian a pagarigan

Balkoten ti agsasaruno a buton babaen ti .btnin .btn-group. Inayon ti opsional a JavaScript a radio ken ti kahon ti tsek nga estilo a kababalin babaen ti plugin dagiti butonmi .

<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>
Siguraduen nga umiso roleken mangipaay iti etiketa

Tapno dagiti makatulong a teknolohia (kas dagiti managbasa iti iskrin) ket mangipakaammo a ti maysa a serye dagiti buton ket nagrupo, ti maitutop rolea kababalin ket kasapulan a maited. Para kadagiti grupo ti buton, daytoy ket agbalin koma a role="group", bayat a dagiti toolbar ket rumbeng nga addaan iti role="toolbar".

Iti pay maipatinayon, dagiti grupo ken dagiti toolbar ket rumbeng a maited ti nalawag nga etiketa, a kas dagiti kaaduan a makatulong a teknolohia ket no saan ket saandanto nga ipakaammo dagitoy, iti laksid ti kaadda ti umno a kababalin ti akem. Kadagiti pagarigan a naited ditoy, usarenmi ti aria-label, ngem dagiti alternatibo a kas iti aria-labelledbymabalin met nga usaren.

Buton ti toolbar

Pagtiponen dagiti grupo dagiti grupo ti buton kadagiti toolbar ti buton para kadagiti ad-adu a komplikado a paset. Usaren dagiti klase ti utilidad no kasapulan tapno espasyo dagiti grupo, buton, ken dadduma pay.

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

Mariknam a nawaya a manglaok kadagiti grupo ti input kadagiti grupo ti buton kadagiti toolbarmo. Kasla ti pagarigan iti ngato, kasapulam la ketdi ti sumagmamano a utilidad nupay kasta tapno umiso ti espasyo dagiti bambanag.

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

Panag-sizing

Imbes nga iyaplikar dagiti klase ti panagdakkel ti buton iti tunggal maysa a buton iti maysa a grupo, inayon laeng .btn-group-*iti tunggal maysa .btn-group, a mairaman ti tunggal maysa no ag-umok kadagiti adu a 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>

Panag-umok

Ikabil ti maysa iti .btn-groupuneg ti sabali .btn-groupno kayatmo dagiti dropdown menu a nalaokan iti agsasaruno a buton.

Dropdown nga link Dropdown nga 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 a panagduduma

Pagbalinen a ti maysa a set dagiti buton ket agparang a bertikal a naurnong imbes a horizontal. Saan a nasuportaran ditoy dagiti dropdown ti split button.

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