Bootstrap 5 Nhóm nút
- Trang trước Nút BS5
- Trang tiếp theo Huy hiệu BS5
Nhóm nút
Bootstrap 5 cho phép bạn nhóm lại một loạt các nút trong nhóm nút (trên một hàng):
Hãy sử dụng .btn-group
của lớp <div>
thành phần để tạo nhóm nút:
Mô hình
<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>
Lưu ý:Vui lòng không áp dụng kích thước nút cho mỗi nút trong nhóm, mà hãy sử dụng lớp .btn-group-lg
Dùng cho nhóm nút lớn hoặc sẽ .btn-group-sm
Dùng cho nhóm nút nhỏ:
Mô hình
<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>
Nhóm nút dọc
Bootstrap 5 cũng hỗ trợ nhóm nút dọc:
Vui lòng sử dụng lớp .btn-group-vertical
Tạo nhóm nút dọc:
Mô hình
<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>
Nhóm nút dọc
Mặc định, nhóm nút là "inline", khi có nhiều nhóm nút sẽ hiển thị theo hàng ngang:
Mô hình
<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">Long thành</button> <button type="button" class="btn btn-primary">Hồng kỳ</button> </div>
Nhóm nút đệm tầng và menu thả
Nhóm nút đệm tầng, có thể tạo ra menu thả (bạn sẽ học thêm về menu thả trong các chương sau):
Mô hình
<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="#">Điện thoại</a> <a class="dropdown-item" href="#">Máy tính bảng</a> </div> </div> </div>
- Trang trước Nút BS5
- Trang tiếp theo Huy hiệu BS5