ViệtChào mừng bạn đến với CodeTutHub! Trong bài viết này, chúng ta sẽ tìm hiểu về Buttons trong Bootstrap 5 - một thành phần giao diện cơ bản và rất quan trọng. Buttons được sử dụng rộng rãi trong các dự án web để thực hiện các hành động, điều hướng, hoặc gửi biểu mẫu.
Giới thiệu về Buttons trong Bootstrap 5
Buttons trong Bootstrap 5 được thiết kế sẵn với các kiểu dáng và màu sắc đa dạng, giúp bạn tạo giao diện nhanh chóng và đẹp mắt. Với các lớp tiện ích của Bootstrap, bạn có thể tùy chỉnh kích thước, trạng thái, và hành vi của nút.
Cú pháp cơ bản để tạo một Button trong Bootstrap:
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
<hr>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Trái</button>
<button type="button" class="btn btn-primary">Giữa</button>
<button type="button" class="btn btn-primary">Phải</button>
</div>
<hr>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>Các loại Buttons trong Bootstrap 5
Bootstrap cung cấp nhiều loại Buttons với màu sắc đại diện cho các trạng thái khác nhau. Dưới đây là danh sách các loại nút cơ bản:
1. Primary
<button type="button" class="btn btn-primary">Primary</button>2. Secondary
<button type="button" class="btn btn-secondary">Secondary</button>3. Success
<button type="button" class="btn btn-success">Success</button>4. Danger
<button type="button" class="btn btn-danger">Danger</button>5. Warning
<button type="button" class="btn btn-warning text-dark">Warning</button>6. Info
<button type="button" class="btn btn-info text-dark">Info</button>7. Light
<button type="button" class="btn btn-light">Light</button>8. Dark
<button type="button" class="btn btn-dark">Dark</button>Kích thước Buttons
Bạn có thể điều chỉnh kích thước của nút bằng cách sử dụng các lớp .btn-lg (lớn hơn) hoặc .btn-sm (nhỏ hơn):
Nút lớn (btn-lg)
<button type="button" class="btn btn-primary btn-lg">Nút Lớn</button>Nút nhỏ (btn-sm)
<button type="button" class="btn btn-secondary btn-sm">Nút Nhỏ</button>Outline Button
Nút đường viền chỉ có viền xung quanh, không có màu nền. Sử dụng lớp .btn-outline-<type>:
Ví dụ:
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>Active Button
Bạn có thể tạo một nút trong trạng thái "kích hoạt" bằng cách thêm lớp .active:
<button type="button" class="btn btn-primary active">Nút Kích Hoạt</button>Disabled Button
Để vô hiệu hóa nút, thêm thuộc tính disabled hoặc sử dụng lớp .disabled:
Sử dụng thuộc tính disabled
<button type="button" class="btn btn-secondary" disabled>Vô Hiệu Hóa</button>Sử dụng class .disabled
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Vô Hiệu Hóa</a>Block (Full Width Buttons)
Để tạo nút chiếm toàn bộ chiều ngang của bố cục, sử dụng lớp .d-block và .w-100:
<button type="button" class="btn btn-primary d-block w-100">Nút Toàn Chiều Rộng</button>Button Group
Bạn có thể nhóm nhiều nút lại với nhau bằng cách sử dụng .btn-group:
<div class="btn-group" role="group" aria-label="Button group example">
<button type="button" class="btn btn-primary">Nút 1</button>
<button type="button" class="btn btn-primary">Nút 2</button>
<button type="button" class="btn btn-primary">Nút 3</button>
</div>Tích hợp JavaScript
Bạn có thể điều khiển hành vi của Buttons bằng cách kết hợp với JavaScript.
Nút Toggle
Tạo nút bật/tắt trạng thái bằng cách sử dụng thuộc tính data-bs-toggle="button":
<button type="button" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false">
Toggle Button
</button>Kết luận
Buttons trong Bootstrap 5 là một công cụ mạnh mẽ và linh hoạt để tạo các thành phần điều hướng và tương tác trong ứng dụng web của bạn. Với các kiểu dáng, kích thước, và tùy chọn đa dạng, bạn có thể dễ dàng thiết kế giao diện đẹp mắt và chuyên nghiệp.
Hãy theo dõi CodeTutHub để tiếp tục khám phá các thành phần hấp dẫn khác trong series học Bootstrap 5. Nếu bạn có câu hỏi hoặc ý tưởng, hãy để lại bình luận nhé!
Chúc bạn học tốt!
