Bootstrap 5 Nhóm nút

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>

Thử trực tiếp

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>

Thử trực tiếp

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>

Thử trực tiếp

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>

Thử trực tiếp

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>

Thử trực tiếp