Source

Grup tombol

Kelompokkan serangkaian tombol bersama-sama dalam satu baris dengan grup tombol, dan perkuat mereka dengan JavaScript.

Contoh dasar

Bungkus serangkaian tombol .btndengan .btn-group. Tambahkan radio JavaScript opsional dan perilaku gaya kotak centang dengan plugin tombol kami .

<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>
Pastikan benar roledan berikan label

Agar teknologi bantu (seperti pembaca layar) menyampaikan bahwa serangkaian tombol dikelompokkan, roleatribut yang sesuai perlu disediakan. Untuk grup tombol, ini akan menjadi role="group", sedangkan bilah alat harus memiliki file role="toolbar".

Selain itu, grup dan toolbar harus diberi label eksplisit, karena sebagian besar teknologi bantu tidak akan mengumumkannya, meskipun ada atribut peran yang benar. Dalam contoh yang disediakan di sini, kami menggunakan aria-label, tetapi alternatif seperti aria-labelledbyjuga dapat digunakan.

Bilah alat tombol

Gabungkan kumpulan grup tombol ke bilah alat tombol untuk komponen yang lebih kompleks. Gunakan kelas utilitas sesuai kebutuhan untuk memisahkan grup, tombol, dan lainnya.

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

Jangan ragu untuk mencampur grup input dengan grup tombol di bilah alat Anda. Mirip dengan contoh di atas, Anda mungkin memerlukan beberapa utilitas untuk mengatur ruang dengan benar.

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

Perekat

Alih-alih menerapkan kelas ukuran tombol ke setiap tombol dalam grup, tambahkan saja .btn-group-*ke masing-masing .btn-group, termasuk masing-masing saat menyusun beberapa 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>

Bersarang

Tempatkan a .btn-groupdi dalam yang lain .btn-groupketika Anda ingin menu dropdown dicampur dengan serangkaian tombol.

Tautan tarik-turun Tautan tarik-turun 
<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 vertikal

Buat sekumpulan tombol tampak bertumpuk secara vertikal, bukan horizontal. Dropdown tombol split tidak didukung di sini.

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