Nhóm nút Bootstrap 4
Nhóm nút
Bootstrap 4 cho phép bạn nhóm một loạt 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
cho nhóm nút lớn hoặc .btn-group-sm
cho nhóm nút nhỏ:
Nút lớn:
Các nút mặc định:
Nút nhỏ:
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 4 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 lồng nhau & menu thả xuống
Các nhóm nút lồng nhau để tạo menu thả xuống (bạn sẽ tìm hiểu thêm về menu thả xuống ở chương sau):
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
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</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
dropdown-toggle-split"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
Hãy tự mình thử »Nhóm nút dọc w/Thả xuống
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>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Hãy tự mình thử »Nhóm nút cạnh nhau
Các nhóm nút theo mặc định là "nội tuyến", khiến chúng xuất hiện cạnh nhau khi bạn có nhiều nhóm:
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>
<div class="btn-group">
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Mercedes</button>
<button type="button" class="btn btn-primary">Volvo</button>
</div>
Hãy tự mình thử »