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 với nhóm nút và tăng sức mạnh cho chúng bằng JavaScript.

Ví dụ cơ bản

Bọc một loạt các nút với .btntrong .btn-group. Thêm hành vi kiểu hộp kiểm và radio JavaScript tùy chọn với plugin nút của chúng tôi .

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">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.

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 mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-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-secondary">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 mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon">@</div>
    </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-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon2">@</div>
    </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-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </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 xếp chồng 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.

<div class="btn-group-vertical">
  ...
</div>