Grup Tombol Bootstrap 5
- Previous Page BS5 Button
- Next Page BS5 Badge
Grup tombol
Bootstrap 5 memungkinkan Anda menggabungkan sekumpulan tombol dalam grup tombol (dalam baris satu):
Gunakan yang memiliki .btn-group
kelas <div>
element untuk membuat grup tombol:
Example
<div class="btn-group"> <button type="button" class="btn btn-primary">Huawei</button> <button type="button" class="btn btn-primary">DJI</button> <button type="button" class="btn btn-primary">Xiaomi</button> </div>
Petunjuk:Jangan aplikasikan ukuran tombol ke semua tombol di dalam grup, melainkan gunakan kelas .btn-group-lg
Untuk grup tombol besar atau untuk .btn-group-sm
Untuk grup tombol kecil:
Example
<div class="btn-group btn-group-lg"> <button type="button" class="btn btn-primary">Huawei</button> <button type="button" class="btn btn-primary">DJI</button> <button type="button" class="btn btn-primary">Xiaomi</button> </div>
Vertical Button Groups
Bootstrap 5 also supports vertical button groups:
Please use the class .btn-group-vertical
Create a vertical button group:
Example
<div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Huawei</button> <button type="button" class="btn btn-primary">DJI</button> <button type="button" class="btn btn-primary">Xiaomi</button> </div>
Side-by-Side Button Groups
By default, button groups are "inline", and multiple button groups are displayed side by side when there are multiple button groups:
Example
<div class="btn-group"> <button type="button" class="btn btn-primary">Huawei</button> <button type="button" class="btn btn-primary">DJI</button> <button type="button" class="btn btn-primary">Xiaomi</button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary">Geely</button> <button type="button" class="btn btn-primary">Great Wall</button> <button type="button" class="btn btn-primary">Hongqi</button> </div>
Nested Button Groups and Dropdown Menus
Nested button groups can create dropdown menus (you will learn more about dropdown menus in the following chapters):
Example
<div class="btn-group"> <button type="button" class="btn btn-primary">Huawei</button> <button type="button" class="btn btn-primary">DJI</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Xiaomi</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Phone</a> <a class="dropdown-item" href="#">Tablet</a> </div> </div> </div>
- Previous Page BS5 Button
- Next Page BS5 Badge