Bootstrap: Nhóm nút (Button groups)
Gộp một chuỗi các nút lại cùng nhau trên cùng một dòng bằng cách sử dụng nhóm nút. Bạn cũng có biến nhóm nút thành các radio hoặc checkbox với plugin nút của chúng tôi.
Chú thích & popover trong nhóm nút yêu cầu các thiết lập đặc biệt
Khi sử dụng chú thích hoặc popover trên các phần tử nằm bên trong một .btn-group, bạn sẽ phải chỉ rõ tùy chọn container: 'body' để tránh các hiệu ứng không mong muốn (side effect) (ví dụ như các phần tử lớn dần lên hoặc bị mất góc bo tròn khi chú thích hoặc popover được kích hoạt).
Ví dụ cơ bản
Hãy đặt một chuỗi nút với class .btn bên trong một .btn-group.
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
Thanh công cụ dạng nút
Kết hợp các tập hợp <div class="btn-group"> thành <div class="btn-toolbar"> đối với các thành phần phức tạp.
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">...</div>
<div class="btn-group">...</div>
<div class="btn-group">...</div>
</div>
Kích thước
Thay vì áp dụng các class kích thước cho từng nút trong một nhóm, hãy thêm .btn-group-* vào .btn-group.
<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>
Lồng nhau
Hãy đặt một .btn-group bên trong một .btn-group khác khi bạn muốn menu sổ xuống kết hợp với nhóm các nút.
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">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</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
Biến đổi theo chiều dọc
Làm cho một nhóm các nút hiển thị dưới dạng xếp chồng lên nhau theo hàng dọc thay vì dàn hàng ngang. Các menu dạng nút có phân chia không được hỗ trợ trong trường hợp này.
<div class="btn-group-vertical">
...
</div>
Nhóm nút được căn đều
Làm cho các nhóm nút có chiều rộng trải dài đúng bằng với chiều rộng của phần tử cha, cũng hoạt động với các menu sổ xuống dạng nút bên trong một nhóm các nút.
Xử lý đường viền
Do mã HTML và CSS cụ thể được sử dụng để căn đều các nút (cụ thể là display: table-cell), nên các đường viền nằm giữa các nút bị nhân đôi. Đối với các nhóm nút thông thường, margin-left: -1px được sử dụng để xếp chồng các đường viền lên nhau thay vì xóa bỏ chúng. Tuy nhiên, margin không hoạt động với display: table-cell. Kết quả là, tùy thuộc vào việc tùy chỉnh của bạn đối với Bootstrap, bạn có thể xóa bỏ hoặc đổi màu các đường viền như mong muốn.
Trình duyệt IE8 and đường viền
Trình duyệt Internet Explorer 8 không sinh ra các đường viền trong một nhóm nút được căn đều, bất kể là trên phần tử <a>hay <button>. Để giải quyết vấn đề này, bạn hãy đặt mỗi nút của bạn vào trong một .btn-group.
Hãy tham khảo #12476 để biết thêm chi tiết.
Với phần tử <a>
Hãy bọc chuỗi các phần tử a có class .btn bằng .btn-group.btn-group-justified.
<div class="btn-group btn-group-justified">
...
</div>
Với phần tử <button>
Để sử dụng các nhóm nút căn đều có các nút dạng <button>, bạn phải bọc mỗi nút bằng một nhóm nút. Hầu hết các trình duyệt không áp dụng CSS của Bootstrap cho việc căn đều các phần tử <button>, tuy nhiền vì chúng tôi hỗ trợ các menu dạng nút nên chúng tôi có thể xử lý vấn đề đó.
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>