Tạo các nút bấm, nhóm nút bấm button trong Boostrap

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 và .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>

Primary link Link

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>

Primary link Link

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>

Primary link Link

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

Link1 Link2 Link3 Link4 Link5

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

ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB

Tạo các nút bấm, nhóm nút bấm button trong Boostrap

Nút bấm .btn

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

Nút bấm `.btn`

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