Bootstrap - Nhóm nút

Các nhóm nút cho phép nhiều nút được xếp chồng lên nhau trên một dòng. Điều này rất hữu ích khi bạn muốn đặt các mục như nút căn chỉnh với nhau. Bạn có thể thêm hành vi kiểu hộp kiểm và radio JavaScript tùy chọn bằng Plugin nút Bootstrap .

Bảng sau đây tóm tắt các lớp quan trọng mà Bootstrap cung cấp để sử dụng các nhóm nút:

Lớp học	Sự miêu tả	Mẫu mã
.btn-group	Lớp này được sử dụng cho một nhóm nút cơ bản. Bọc một loạt các nút với lớp.btn trong .btn-group.	`<div class = "btn-group"> <button type = "button" class = "btn btn-default">Button1</button> <button type = "button" class = "btn btn-default">Button2</button> </div>`
.btn-thanh công cụ	Điều này giúp kết hợp các bộ <div class = "btn-group"> thành <div class = "btn-toolbar"> cho các thành phần phức tạp hơn.	`<div class = "btn-toolbar" role = "toolbar"> <div class = "btn-group">...</div> <div class = "btn-group">...</div> </div>`
.btn-group-lg, .btn-group-sm, .btn-group-xs	Các lớp này có thể được áp dụng cho nhóm nút thay vì thay đổi kích thước từng nút.	`<div class = "btn-group btn-group-lg">...</div> <div class = "btn-group btn-group-sm">...</div> <div class = "btn-group btn-group-xs">...</div>`
.btn-group-vertical	Lớp này 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 chứ không phải theo chiều ngang.	`<div class = "btn-group-vertical"> ... </div>`

Nhóm nút cơ bản

Ví dụ sau minh họa việc sử dụng lớp .btn-group đã thảo luận trong bảng trên -

<div class = "btn-group">
   
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>
   
</div>

Thanh công cụ Nút

Ví dụ sau minh họa việc sử dụng lớp .btn-toolbar đã thảo luận trong bảng trên -

<div class = "btn-toolbar" role = "toolbar">
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 1</button>
      <button type = "button" class = "btn btn-default">Button 2</button>
      <button type = "button" class = "btn btn-default">Button 3</button>
   </div>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 4</button>
      <button type = "button" class = "btn btn-default">Button 5</button>
      <button type = "button" class = "btn btn-default">Button 6</button>
   </div>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 7</button>
      <button type = "button" class = "btn btn-default">Button 8</button>
      <button type = "button" class = "btn btn-default">Button 9</button>
   </div>
   
</div>

Kích thước nút

Ví dụ sau minh họa việc sử dụng lớp .btn-group-* đã thảo luận trong bảng trên -

<div class = "btn-group btn-group-lg">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>
</div>

<div class = "btn-group btn-group-sm">
   <button type = "button" class = "btn btn-default">Button 4</button>
   <button type = "button" class = "btn btn-default">Button 5</button>
   <button type = "button" class = "btn btn-default">Button 6</button>
</div>

<div class = "btn-group btn-group-xs">
   <button type = "button" class = "btn btn-default">Button 7</button>
   <button type = "button" class = "btn btn-default">Button 8</button>
   <button type = "button" class = "btn btn-default">Button 9</button>
</div>

Làm tổ

Bạn có thể lồng các nhóm nút trong một nhóm nút khác, tức là đặt một .btn-group trong cái khác .btn-group . Điều này được thực hiện khi bạn muốn các menu thả xuống trộn lẫn với một loạt các nút.

<div class = "btn-group">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>
  
</div>

Nhóm mông dọc

Ví dụ sau minh họa việc sử dụng lớp .btn-group-vertical đã thảo luận trong bảng trên -

<div class = "btn-group-vertical">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   
   <div class = "btn-group-vertical">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>
  
</div>