Nút bấm (Buttons) trong Bootstrap là một trong những thành phần giao diện phổ biến được sử dụng để tạo các nút tương tác trên trang web. Bootstrap cung cấp một số lớp tiện ích để tùy chỉnh giao diện và hành vi của các nút bấm. Dưới đây là một số thông tin chi tiết và cách sử dụng nút bấm trong Bootstrap:

1. Cú pháp cơ bản

Các nút trong Bootstrap được tạo bằng cách sử dụng thẻ <button> hoặc <a> kết hợp với các lớp CSS Bootstrap. Một ví dụ đơn giản về nút cơ bản là:

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

Hoặc bạn cũng có thể sử dụng thẻ <a> để tạo nút bấm:

<a href="#" class="btn btn-primary">Primary Link</a>

2. Các kiểu nút cơ bản

Bootstrap cung cấp nhiều loại nút với các màu sắc và ý nghĩa khác nhau. Dưới đây là một số kiểu nút thông dụng:

.btn-primary: Dùng cho hành động chính.
.btn-secondary: Dùng cho các hành động phụ.
.btn-success: Thường dùng cho thông báo hành động thành công.
.btn-danger: Dùng cho cảnh báo hoặc các hành động có thể gây hậu quả xấu.
.btn-warning: Dùng để cảnh báo người dùng về các hành động.
.btn-info: Dùng cho thông tin thêm.
.btn-light và .btn-dark: Tùy thuộc vào chủ đề sáng tối của giao diện.

Ví dụ:

<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-info">Info Button</button>

3. Nút kích thước lớn và nhỏ

Bootstrap cho phép bạn thay đổi kích thước của nút bằng cách thêm lớp .btn-lg cho nút lớn hoặc .btn-sm cho nút nhỏ.

Ví dụ:

<button type="button" class="btn btn-primary btn-lg">Large Button</button>
<button type="button" class="btn btn-primary btn-sm">Small Button</button>

4. Nút dạng khối (Block-level Buttons)

Nút có thể chiếm toàn bộ chiều ngang của phần tử chứa bằng cách sử dụng lớp .btn-block.

<button type="button" class="btn btn-primary btn-block">Block Level Button</button>

5. Nút không viền (Outline Buttons)

Ngoài các nút đầy màu, Bootstrap còn hỗ trợ các nút dạng viền (outline), tức là chỉ có đường viền và văn bản, không có nền.

Ví dụ:

<button type="button" class="btn btn-outline-primary">Primary Outline</button>
<button type="button" class="btn btn-outline-success">Success Outline</button>

6. Nút bị vô hiệu hóa (Disabled Button)

Để vô hiệu hóa một nút, bạn có thể thêm thuộc tính disabled vào thẻ <button> hoặc sử dụng lớp .disabled với thẻ <a>.

<button type="button" class="btn btn-primary" disabled>Disabled Button</button>
<a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true">Disabled Link</a>

7. Nút với hình ảnh hoặc biểu tượng

Bạn có thể kết hợp văn bản với biểu tượng hoặc hình ảnh bằng cách sử dụng thư viện icon như Font Awesome hoặc sử dụng thẻ <img>.

<button type="button" class="btn btn-primary">
    <i class="fas fa-check"></i> Submit
</button>

8. Nút thả xuống (Dropdown Button)

Nút thả xuống là một phần mở rộng của nút bấm thông thường và được sử dụng để hiển thị các lựa chọn khi nhấp vào nút.

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

9. Tùy chỉnh thêm

Bạn có thể kết hợp các lớp CSS tùy chỉnh hoặc JavaScript để tạo các hành vi phức tạp hơn cho các nút bấm trong Bootstrap.

Kết luận

Nút bấm trong Bootstrap rất linh hoạt, giúp bạn dễ dàng tạo ra các giao diện nút đẹp mắt và tiện dụng. Các lớp CSS có sẵn cho phép bạn tùy chỉnh từ màu sắc, kích thước, đến hành vi của nút chỉ với một vài dòng mã.

Bootstrap