Nhóm nút Bootstrap
Nhóm nút
Bootstrap cho phép bạn nhóm một loạt các nút lại với nhau (trên một dòng) trong một nhóm nút:
Sử dụng một <div>phần tử với lớp .btn-groupđể tạo một nhóm nút:
Thí dụ
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Mẹo: Thay vì áp dụng kích thước nút cho mọi nút trong nhóm, hãy sử dụng lớp .btn-group-lg|sm|xsđể định kích thước cho tất cả các nút trong nhóm:
Thí dụ
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Nhóm nút dọc
Bootstrap cũng hỗ trợ các nhóm nút dọc:
Sử dụng lớp .btn-group-verticalđể tạo một nhóm nút dọc:
Thí dụ
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Nhóm nút hợp lý
Để mở rộng toàn bộ chiều rộng của màn hình, hãy sử dụng .btn-group-justified
lớp:
Ví dụ với <a>các phần tử:
Thí dụ
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>
Lưu ý: Đối với <button>các phần tử, bạn phải bọc mỗi nút trong một .btn-grouplớp:
Thí dụ
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
Nhóm nút lồng và menu thả xuống
Các nhóm nút lồng nhau để tạo menu thả xuống:
Thí dụ
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>
Trình đơn thả xuống Nút tách
Thí dụ
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>