Bootstrap 4 - Bootstrap Button Groups

Cách tạo và sử dụng Button Group trong Bootstrap

Ngoài cho phép tạo và chỉnh sửa các nút bằng các lớp xác định trước, Bootstrap còn cho phép người dùng nhóm một loạt các nút với nhau trong cùng một dòng bằng cách sử dụng Button Group.

Để tạo Button Group trong Bootstrap, chúng ta chỉ cần sử dụng lớp .btn trong phần tử div để bọc các nút và áp dụng lớp .btn-group trên đó.

Ví dụ: trong ví dụ dưới đây minh họa cách tạo Button Group trong Bootstrap:

<div class="btn-group">
    <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>

Xem ví dụ


Tạo Các Nút Trong Thanh Toolbar

Ngoài ra chúng ta có thể nhóm các nút với nhau để tạo các thành phần phức tạp hơn như nút trong thanh toolbar.

Để tạo các nút trong thanh Toolbar, chúng ta chỉ cần bọc các Button Group trong phần tử div và áp dụng lớp .btn-toolbar trên đó như trong ví dụ dưới đây:

<div class="btn-group mr-2">
    <button type="button" class="btn btn-primary">
        <i class="fa fa-font"></i>
    </button>
    <button type="button" class="btn btn-primary">
        <i class="fa fa-bold"></i>
    </button>
    <button type="button" class="btn btn-primary">
        <i class="fa fa-italic"></i>
    </button>
</div>
<div class="btn-group mr-2">
    <button type="button" class="btn btn-primary">
        <i class="fa fa-align-left"></i>
    </button>
    <button type="button" class="btn btn-primary">
        <i class="fa fa-align-center"></i>
    </button>
    <button type="button" class="btn btn-primary">
        <i class="fa fa-align-right"></i>
    </button>
    <button type="button" class="btn btn-primary">
        <i class="fa fa-align-justify"></i>
    </button>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-primary">
        <i class="fa fa-undo"></i>
    </button>
</div>

Xem ví dụ


 Chỉ Định Chiều Cao Cho Button Group

Thay vì áp dụng các lớp chỉ định kích thước cho các nút trong mỗi nhóm, chúng ta chỉ cần áp dụng các lớp chỉ định kích thước cho Button Group chẳng hạn như .btn-group-lg hoặc .btn-group-sm trực tiếp cho mỗ phần tử .btn-group để tạo các nút có kích thước lớn hơn hoặc nhỏ hơn như trong ví dụ dưới đây:

<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>
<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>
<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>

Xem ví dụ


 Button Group Lồng Nhau

Ngoài ra chúng ta cũng có thể lồng các Button Group với nhau.

Ví dụ: Trong ví dụ dưới đây minh họa cách lồng lớp .btn-group trong lớp .btn-group khác để tạo menu dạng thả trong button group.

<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-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>

Xem ví dụ


Sắp Xếp Button Group Theo Chiều Dọc

Nếu muốn, chúng ta có thể sắp xếp Button Group hiển thị theo chiều dọc thay vì chiều ngang. Để làm được điều này, chỉ cần thay thế lớp .btn-group bằng lớp .btn-group-vertical như trong ví dụ dưới đây:

<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-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>

Xem ví dụ


 Căn Chỉnh Button Group Cho Hợp Lý

Cuối cùng chúng ta có thể kéo các Button Group để lấy đầy chiều rộng trang web bằng cách áp dụng lớp tiện ích .d-flex cho phần tử .btn-group. Trong trường hợp này các nút sẽ được phân bổ chiều rộng bằng nhau.

<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>

Xem ví dụ