Nút bấm .btn

Các nút bấm là thành phần sử dụng rất nhiều trong các thiết kế giao diện, đặc biệt ở các form, các hộp thoại. Trong Bootstrap tạo ra các nút bấm bằng cách sử dụng lớp .btn theo sau là các lớp định dạng .btn-*. Thông thường thì sử dụng phần tử HTML <button> để tạo nút bấm, tuy nhiên bạn có thể sử dụng bất kỳ phần tử nào như span, a, ...

Ví dụ code HTML tạo ra một nút bấm từ phần tử <button>, nếu muốn có thể sử dụng các loại phần tử HTML khác như <span> <a> <input> ...

Muốn chuyển sang loại nút bấm mà không tô màu nền thì sử dụng .btn-outline-*

<button type="button" class="btn btn-primary">
    Primary
</button>

<button type="button" class="btn btn-outline-danger">
    Primary
</button>
    

    Bấm vào nút bấm để xem mã HTML

Tạo ra nút bấm sử dụng bắt với class bắt đầu là .btn theo sau định dạng cơ bản bởi các class .btn-primary .btn-secondary .btn-success .btn-danger .btn-warning .btn-info .btn-light .btn-dark .btn-link

Muốn có nút bấm lớn thêm vào .btn-lg hoặc thì là .btn-sm

Muốn nút bấm hiện thị dạng block thì thêm vào .btn-block

Hãy bấm vào các nút bấm dưới đây để xem code HTML của nó


Danger - Link Warning - Lớn

Trạng thái của nút bấm

Có thể thiết lập thêm cho nút bấm trạng thái là hiệu lực bằng cách thêm .active hoặc vô hiệu bằng cách thêm .disabled (tắt hiệu ứng hover và hiện thị ở màu vô hiệu). Lớp .active.disanabled hay dùng với phần tử <a>

Trạng thái bình thường:

<a href="#" class="btn btn-danger btn-lg">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg">Link</a>        

Khi thêm .active

<a href="#" 
    class="btn btn-danger btn-lg active">Primary link</a>
<a href="#" 
    class="btn btn-secondary btn-lg active">Link</a>    

Khi thêm .disabled


<a href="#" 
    class="btn btn-danger btn-lg disabled">Primary link</a>
<a href="#" 
    class="btn btn-secondary btn-lg disabled">Link</a>

Nhóm nút bấm .btn-group .btn-group-vertical

Để tạo ra một nhóm nút bấm, hiện thị trên một dòng đơn chỉ cần tạo ra phần tử .btn-group hoặc .btn-group-verticalnó bao bọc lấy các phần tử nút bấm .btn

<div class="btn-group">
    <a href="#" class="btn btn-danger">Link1</a>
    <a href="#" class="btn btn-success">Link2</a>
    <a href="#" class="btn btn-primary">Link3</a>
    <a href="#" class="btn btn-danger">Link4</a>
    <a href="#" class="btn btn-danger">Link5</a>
</div>

<div class="btn-group-vertical">
    <a href="#" class="btn btn-danger">Link1</a>
    <a href="#" class="btn btn-success">Link2</a>
    <a href="#" class="btn btn-primary">Link3</a>
    <a href="#" class="btn btn-danger">Link4</a>
    <a href="#" class="btn btn-danger">Link5</a>
</div>

Để điều chỉnh kích thước nhóm, có lớp .btn-group-lg .btn-group-sm. Nếu muốn nhóm các nút bố trí theo chiều ngang thì dùng đến .btn-group-vertical

Nếu có nhiều nhóm nút bấm, có thể cho chúng vào một phần tử .btn-toolbar để tạo thành thanh công cụ cho ứng dụng web, ví dụ:


<div class="btn-toolbar">

    <div class="btn-group mx-1">
        <a href="#" class="btn btn-danger">Copy</a>
        <a href="#" class="btn btn-success">Cut</a>
        <a href="#" class="btn btn-primary">Paste</a>
    </div>
    <div class="btn-group  mx-1">
        <a href="#" class="btn btn-secondary">Normal</a>
        <a href="#" class="btn btn-secondary font-weight-bold">Bold</a>
        <a href="#" class="btn btn-secondary font-italic">Itatic</a>
    </div>
    <div class="btn-group  mx-1">
        <a href="#" class="btn btn-danger">Link1</a>
        <a href="#" class="btn btn-success">Link2</a>
        <a href="#" class="btn btn-primary">Link3</a>
        <a href="#" class="btn btn-danger">Link4</a>
        <a href="#" class="btn btn-danger">Link5</a>
    </div>
</div>