Kumpulan butang
Himpunkan satu siri butang bersama-sama pada satu baris dengan kumpulan butang, dan kuasakannya dengan JavaScript.
Balut satu siri butang dengan .btn
dalam .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 role
dan sediakan label
Untuk membolehkan teknologi bantuan (seperti pembaca skrin) menyampaikan bahawa satu siri butang dikumpulkan, role
atribut yang sesuai perlu disediakan. Untuk kumpulan butang, ini ialah role="group"
, manakala bar alat harus mempunyai role="toolbar"
.
Di samping 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-labelledby
juga boleh digunakan.
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>
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>
Letakkan a .btn-group
dalam satu lagi .btn-group
apabila anda mahu menu lungsur bercampur dengan satu siri butang.
<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>
Jadikan satu set butang kelihatan disusun secara menegak dan bukannya mendatar. Butang lungsur pisah tidak disokong di sini.
<div class="btn-group-vertical">
...
</div>