Source

Kumpulan butang

Himpunkan satu siri butang bersama-sama pada satu baris dengan kumpulan butang, dan kuasakannya dengan JavaScript.

Contoh asas

Balut satu siri butang dengan .btndalam .btn-group. Tambahkan pada radio JavaScript pilihan dan gelagat gaya kotak pilihan dengan pemalam butang 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 betul roledan sediakan label

Untuk membolehkan teknologi bantuan (seperti pembaca skrin) menyampaikan bahawa satu siri butang dikumpulkan, roleatribut yang sesuai perlu disediakan. Untuk kumpulan butang, ini ialah role="group", manakala bar alat harus mempunyai role="toolbar".

Selain itu, kumpulan dan bar alat harus diberi label yang jelas, kerana kebanyakan teknologi bantuan sebaliknya tidak akan mengumumkannya, walaupun terdapat atribut peranan yang betul. Dalam contoh yang disediakan di sini, kami menggunakan aria-label, tetapi alternatif seperti aria-labelledbyjuga boleh digunakan.

Bar alat butang

Gabungkan set kumpulan butang ke dalam bar alat butang untuk komponen yang lebih kompleks. Gunakan kelas utiliti mengikut keperluan untuk menjarakkan kumpulan, butang dan banyak lagi.

<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 mencampurkan kumpulan input dengan kumpulan butang dalam bar alat anda. Sama seperti contoh di atas, anda mungkin memerlukan beberapa utiliti walaupun untuk menjarakkan perkara dengan betul.

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

Saiz

Daripada menggunakan kelas saiz butang pada setiap butang dalam kumpulan, cuma tambahkan .btn-group-*pada setiap .btn-group, termasuk setiap satu apabila menyusun berbilang kumpulan.



<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

Letakkan a .btn-groupdalam satu lagi .btn-groupapabila anda mahu menu lungsur bercampur dengan satu siri butang.

Pautan jatuh turun Pautan jatuh 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 menegak

Jadikan satu set butang kelihatan disusun secara menegak dan bukannya mendatar. Butang lungsur pisah tidak disokong di sini.

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