Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần nhóm button (button group) trong Bootstrap.
Trong chương trước, bạn đã học cách tạo các loại button riêng lẻ và cách thay đổi chúng với các lớp được định nghĩa trước. Tuy nhiên, Bootstrap cũng cho phép bạn nhóm một loạt các button lại với nhau trong một hàng duy nhất thông qua thành phần nhóm button.
Để tạo một nhóm button, chỉ cần bọc một loạt các button với lớp .btn
trong một phần tử <div>
và áp dụng lớp .btn-group
trên đó. Ngoài ra, bạn có thể áp dụng lớp .active
trên một button riêng lẻ để biểu thị trạng thái hoạt động. Hãy xem ví dụ sau:
<div class="btn-group">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary active">About</button>
<button type="button" class="btn btn-primary">Services</button>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Tương tự, bạn cũng có thể tạo các nhóm button bằng cách sử dụng các button kiểu viền, như sau:
<div class="btn-group">
<button type="button" class="btn btn-outline-primary">Home</button>
<button type="button" class="btn btn-outline-primary active">About</button>
<button type="button" class="btn btn-outline-primary">Services</button>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Xem hướng dẫn về các button bật tắt trong Bootstrap để tìm hiểu cách bật các radio button và checkbox như bật / tắt trên các nhóm button mà không cần sử dụng bất kỳ mã JavaScript nào.
Bạn cũng có thể trộn và kết hợp các kiểu button khác nhau để tạo các nhóm button như sau:
<div class="btn-group">
<button type="button" class="btn btn-success">
<i class="bi-eye"></i> View
</button>
<button type="button" class="btn btn-warning">
<i class="bi-pencil"></i> Edit
</button>
<button type="button" class="btn btn-danger">
<i class="bi-trash"></i> Delete
</button>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Bạn cũng có thể kết hợp các nhóm button với nhau để tạo các thành phần phức tạp hơn như thanh công cụ. Để tạo thanh công cụ, chỉ cần bọc các nhóm button trong một phần tử <div>
và áp dụng lớp .btn-toolbar
trên đó, như thể hiện trong ví dụ sau:
<div class="btn-toolbar">
<div class="btn-group me-2">
<button type="button" class="btn btn-primary">
<i class="bi-fonts"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="bi-type-bold"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="bi-type-italic"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="bi-type-underline"></i>
</button>
</div>
<div class="btn-group me-2">
<button type="button" class="btn btn-primary">
<i class="bi-text-left"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="bi-text-center"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="bi-text-right"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="bi-justify"></i>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">
<i class="bi-code"></i>
</button>
</div>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Thay vì áp dụng các lớp thay đổi kích thước cho từng button trong một nhóm, bạn có thể chỉ cần áp dụng các lớp thay đổi kích thước cho nhóm button như .btn-group-lg
hoặc .btn-group-sm
trực tiếp cho từng phần tử .btn-group
để tạo các nhóm button lớn hơn hoặc nhỏ hơn, như thể hiện trong ví dụ dưới đây:
<!-- Large button group -->
<div class="btn-group mb-2 btn-group-lg">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">About</button>
<button type="button" class="btn btn-primary">Services</button>
</div>
<br>
<!-- Default button group -->
<div class="btn-group mb-2">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">About</button>
<button type="button" class="btn btn-primary">Services</button>
</div>
<br>
<!-- Small button group -->
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">About</button>
<button type="button" class="btn btn-primary">Services</button>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Các nhóm button cũng có thể được lồng vào nhau. Ví dụ sau minh họa cách đặt một .btn-group
trong một .btn-group
khác để tạo menu thả xuống bên trong các nhóm button.
<div class="btn-group">
<a href="#" class="btn btn-primary">Home</a>
<a href="#" class="btn btn-primary">About</a>
<div class="btn-group">
<a href="#" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Services</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Web Design</a>
<a class="dropdown-item" href="#">Web Development</a>
</div>
</div>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Bạn sẽ tìm hiểu chi tiết về thành phần Bootstrap Dropdown trong phần nâng cao.
Bạn cũng có thể làm cho các nhóm button xuất hiện xếp chồng lên nhau theo chiều dọc thay vì theo chiều ngang. Để làm điều này, chỉ cần thay thế lớp .btn-group
bằng lớp .btn-group-vertical
, như sau:
<div class="btn-group-vertical">
<a href="#" class="btn btn-primary">Home</a>
<a href="#" class="btn btn-primary">About</a>
<div class="btn-group">
<a href="#" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Services</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Web Design</a>
<a class="dropdown-item" href="#">Web Development</a>
</div>
</div>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Bạn cũng có thể kéo dài các nhóm button của mình để lấp đầy tất cả chiều rộng có sẵn bằng cách áp dụng lớp tiện ích flex .d-flex
cho phần tử .btn-group
. Mọi button đều có chiều rộng bằng nhau trong trường hợp này.
<div class="btn-group d-flex">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">About</button>
<button type="button" class="btn btn-primary">Services</button>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Bạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.
Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.
Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.
Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.
Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.