Nhóm nút Bootstrap

Nhóm nút

Bootstrap cho phép chúng ta 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 phần tử <div> với lớp .btn-group để tạo một 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>

Xem kết quả

Thay vì áp dụng kích thước nút cho mọi nút trong nhóm, chúng ta sử dụng lớp .btn-group-lg|sm|xs để định kích thước cho tất cả các nút trong nhóm

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>

Xem kết quả

Nhóm nút dọc

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

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>

Xem kết quả

Nhóm nút tự căn chỉnh

Để mở rộng toàn bộ chiều rộng của màn hình, chúng ta sử dụng lớp .btn-group-justified.

Apple Samsung Sony

Ví dụ với các phần tử <a>.

Ví dụ

<div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-primary">Apple</a>
    <a href="#" class="btn btn-primary">Samsung</a>
    <a href="#" class="btn btn-primary">Sony</a>
</div>

Xem kết quả

Lưu ý: Đối với các phần tử <button>, chúng ta phải bọc các nút trong một lớp .btn-group

Ví dụ

<div class="btn-group btn-group-justified">
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Apple</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Samsung</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Sony</button>
    </div>
</div>

Xem kết quả

Nhóm nút lồng nhau và menu thả xuống

Các nhóm nút lồng nhau để tạo menu thả xuống.

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 <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Tablet</a></li>
            <li><a href="#">Smartphone</a></li>
        </ul>
    </div>
</div>

Xem kết quả

Trình đơn thả xuống với nút tách

Ví dụ

<div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        <span class="caret">&nbsp;</span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Tablet</a></li>
        <li><a href="#">Smartphone</a></li>
    </ul>
</div>