Nhóm nút

Nhóm một loạt các nút lại với nhau trên một dòng hoặc xếp chúng thành một cột dọc.

Trên trang này

Ví dụ cơ bản

Bọc một loạt các nút với .btntrong .btn-group.

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

Đảm bảo chính xác `role`và cung cấp nhãn

Để các công nghệ hỗ trợ (chẳng hạn như trình đọc màn hình) truyền tải rằng một loạt các nút được nhóm lại, rolecần phải cung cấp một thuộc tính thích hợp. Đối với các nhóm nút, điều này sẽ là role="group", trong khi các thanh công cụ phải có role="toolbar".

Ngoài ra, các nhóm và thanh công cụ nên được gắn nhãn rõ ràng, vì hầu hết các công nghệ hỗ trợ sẽ không công bố chúng, mặc dù có sự hiện diện của thuộc tính vai trò chính xác. Trong các ví dụ được cung cấp ở đây, chúng tôi sử dụng aria-label, nhưng các lựa chọn thay thế như aria-labelledbycũng có thể được sử dụng.

Các lớp này cũng có thể được thêm vào các nhóm liên kết, như một sự thay thế cho các .navthành phần điều hướng .

Liên kết hoạt động Liên kết Liên kết

<div class="btn-group">
  <a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
  <a href="#" class="btn btn-primary">Link</a>
  <a href="#" class="btn btn-primary">Link</a>
</div>

Phong cách hỗn hợp

<div class="btn-group" role="group" aria-label="Basic mixed styles example">
  <button type="button" class="btn btn-danger">Left</button>
  <button type="button" class="btn btn-warning">Middle</button>
  <button type="button" class="btn btn-success">Right</button>
</div>

Các kiểu phác thảo

<div class="btn-group" role="group" aria-label="Basic outlined example">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>

Nhóm hộp kiểm và nút radio

Kết hợp hộp kiểm dạng nút và các nút bật tắt radio thành một nhóm nút trông liền mạch.

Hộp kiểm 1 Hộp kiểm 2 Hộp kiểm 3

<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>

  <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>

Đài 1 Đài 2 Đài 3

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>

Kết hợp các nhóm nút thành thanh công cụ nút cho các thành phần phức tạp hơn. Sử dụng các lớp tiện ích nếu cần để xóa các nhóm, nút và hơn thế nữa.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="btn-group me-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-info">8</button>
  </div>
</div>

Thoải mái trộn các nhóm đầu vào với các nhóm nút trong thanh công cụ của bạn. Tương tự như ví dụ trên, bạn có thể sẽ cần một số tiện ích để sắp xếp mọi thứ đúng cách.

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon">@</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-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon2">@</div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
  </div>
</div>

Định cỡ

Thay vì áp dụng các lớp định cỡ nút cho mọi nút trong một nhóm, chỉ cần thêm .btn-group-*vào từng nút .btn-group, bao gồm từng lớp khi lồng nhiều nhóm.

<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>

Làm tổ

Đặt một .btn-grouptrong một cái khác .btn-groupkhi bạn muốn các menu thả xuống kết hợp với một loạt các nút.

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-primary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Biến thể theo chiều dọc

Làm cho một tập hợp các nút xuất hiện được xếp chồng lên nhau theo chiều dọc thay vì theo chiều ngang. Trình đơn thả xuống nút tách không được hỗ trợ ở đây.