Grup tombol

Grup runtuyan tombol babarengan dina garis tunggal jeung grup tombol, sarta super-kakuatan aranjeunna kalayan JavaScript.

conto dasar

Bungkus runtuyan tombol kalawan .btndi .btn-group. Tambahkeun on radio JavaScript pilihan jeung kabiasaan gaya kotak centang jeung tombol kami 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>

Pastikeun leres `role`sareng masihan labél

Supados téknologi pitulung (sapertos pamiarsa layar) nepikeun yén séri tombol dikelompokkeun, roleatribut anu pas kedah disayogikeun. Pikeun grup tombol, ieu bakal role="group", sedengkeun tulbar kedah gaduh role="toolbar".

Salaku tambahan, grup sareng tulbar kedah dipasihan labél anu eksplisit, sabab kalolobaan téknologi anu ngabantosan henteu bakal ngumumkeunana, sanaos ayana atribut peran anu leres. Dina conto anu disayogikeun di dieu, kami nganggo aria-label, tapi alternatif sapertos aria-labelledbyogé tiasa dianggo.

Ngagabungkeun set grup tombol kana toolbar tombol pikeun komponén nu leuwih kompleks. Paké kelas utiliti sakumaha diperlukeun pikeun spasi kaluar grup, tombol, sareng nu sanesna.

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

Ngarasa Luncat pikeun nyampur grup input sareng grup tombol dina tulbar anjeun. Sarupa sareng conto di luhur, anjeun sigana peryogi sababaraha utilitas sanaos pikeun nyéépkeun hal-hal anu leres.

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

Ukuran

Gantina nerapkeun kelas ukuran tombol ka unggal tombol dina grup, ngan tambahkeun .btn-group-*ka unggal .btn-group, kaasup tiap hiji nalika nyarang sababaraha grup.

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

Nyarang

Teundeun a .btn-groupdina sejen .btn-grouplamun rék menu dropdown dicampurkeun jeung runtuyan tombol.

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

Variasi nangtung

Jieun set tombol nembongan vertikal tumpuk tinimbang horisontal. Dropdown tombol pamisah teu dirojong di dieu.

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