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

Sử dụng lớp .btn để tạo nút bấm và các lớp định dạng nút bấm như .btn-sm, .btn-danger, tạo nhóm nút bấm cho ứng dụng web

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>

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

Để đ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

Đăng ký nhận bài viết mới