Bootstrap Button Group

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.

Tạo nhóm button với 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ạo nhóm button với Bootstrap

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:

Tạo nhóm button với Bootstrap

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.

Nhóm button kiểu hỗn hợp

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:

Nhóm button kiểu hỗn hợp

Tạo thanh công cụ

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:

Tạo thanh công cụ trong Bootstrap

Thay đổi kích thước của nhóm button

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:

Thay đổi kích thước của nhóm button

Nhóm button lồng nhau

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:

Nhóm button lồng nhau

Bạn sẽ tìm hiểu chi tiết về thành phần Bootstrap Dropdown trong phần nâng cao.

Nhóm button xếp chồng theo chiều dọc

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:

Nhóm button xếp chồng theo chiều dọc

Tạo nhóm button lấp đầy chiều rộng

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:

Tạo nhóm button lấp đầy chiều rộng
BootstrapBootstrap Cơ Bản
Bài Viết Liên Quan:
Bootstrap Toast
Trung Nguyen 14/04/2022
Bootstrap Toast

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.

Bootstrap ScrollSpy
Trung Nguyen 13/04/2022
Bootstrap ScrollSpy

Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.

Bootstrap Typeahead
Trung Nguyen 13/04/2022
Bootstrap Typeahead

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.

Bootstrap Carousel
Trung Nguyen 12/04/2022
Bootstrap Carousel

Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.