Nhóm nút Bootstrap 4
Nhóm nút
Bootstrap 4 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 một nhóm, hãy sử dụng lớp .btn-group-lgcho nhóm nút lớn hoặc lớp .btn-group-smcho nhóm nút nhỏ:
Các nút lớn:
Các nút mặc định:
Các nút nhỏ:
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 4 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 lồng và 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 trong chương sau):
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
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</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
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>
Nhóm nút dọc w / thả xuống
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>
<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>
Các nhóm nút cạnh nhau
Các nhóm nút là "nội tuyến" theo mặc định, điều này làm cho chúng xuất hiện cạnh nhau khi bạn có nhiều nhóm:
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>
<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>