Nhóm nút Bootstrap 5
Nhóm nút
Bootstrap 5 cho phép bạn nhóm một loạt nút lại với nhau (trên một dòng) trong một nhóm nút:
Sử dụng phần tử <div>
với lớp .btn-group
để tạo nhóm nút:
Ví dụ
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Hãy tự mình thử » Mẹo: Thay vì áp dụng kích thước nút cho mọi nút trong một nhóm, hãy sử dụng lớp .btn-group-lg
cho nhóm nút lớn hoặc .btn-group-sm
cho nhóm nút nhỏ:
Nút lớn:
Các nút mặc định:
Nút nhỏ:
Ví dụ
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Hãy tự mình thử »Nhóm nút dọc
Bootstrap 5 cũng hỗ trợ các nhóm nút dọc:
Sử dụng lớp .btn-group-vertical
để tạo nhóm nút dọc:
Ví dụ
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Hãy tự mình thử » Nhóm nút cạnh nhau
Các nhóm nút theo mặc định là "nội tuyến", khiến chúng xuất hiện cạnh nhau khi bạn có nhiều nhóm:
Ví dụ
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Mercedes</button>
<button type="button" class="btn btn-primary">Volvo</button>
</div>
Hãy tự mình thử »Nhóm nút lồng nhau & menu thả xuống
Các nhóm nút lồng nhau để tạo menu thả xuống (bạn sẽ tìm hiểu thêm về menu thả xuống ở chương sau):
Ví dụ
<div class="btn-group">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn
btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown">Sony</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Hãy tự mình thử »