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 phần tử <div>
với lớp .btn-group
để tạo nhóm nút:
Ví 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>
Hãy tự mình thử » Mẹo: Thay vì áp dụng kích thước nút cho mọi nút trong một nhóm, hãy sử dụng lớp .btn-group-lg|sm|xs
để định kích thước tất cả các nút trong nhóm:
Ví 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>
Hãy tự mình thử »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 nhóm nút dọc:
Ví 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>
Hãy tự mình thử » Nhóm nút căn đều
Để trải rộng toàn bộ chiều rộng của màn hình, hãy sử dụng lớp .btn-group-justified
:
Ví dụ với phần tử <a>
:
Ví 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>
Hãy tự mình thử » Lưu ý: Đối với phần tử <button>
, bạn phải gói từng nút trong lớp .btn-group
:
Ví 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>
Hãy tự mình thử »Nhóm nút lồng nhau & menu thả xuống
Nhóm nút Nest để tạo menu thả xuống:
Ví 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>
Hãy tự mình thử »Nút chia thả xuống
Ví 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>
Hãy tự mình thử »