Buttons, Alerts & Badges trong Bootstrap

Nút bấm (buttons), thông báo (alerts) và nhãn (badges) là các thành phần giao diện quan trọng giúp nâng cao trải nghiệm người dùng. Trong bài này, bạn sẽ học cách tạo và tùy chỉnh chúng với Bootstrap một cách nhanh chóng và hiệu quả.

1. Buttons trong Bootstrap

Cách tạo nút bấm cơ bản

Bootstrap cung cấp các lớp .btn để tạo nút bấm với nhiều kiểu dáng khác nhau:

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>

Các biến thể của Button

• .btn-lg, .btn-sm: Điều chỉnh kích thước nút.
• .btn-outline-*: Nút viền không có màu nền.
• .btn-block: Nút rộng toàn bộ phần tử cha (dùng với Bootstrap 4).

Ví dụ:

<button class="btn btn-outline-primary btn-lg">Lớn</button>
<button class="btn btn-danger btn-sm">Nhỏ</button>

2. Alerts trong Bootstrap

Tạo thông báo

Alerts giúp hiển thị thông báo hoặc cảnh báo cho người dùng:

<div class="alert alert-success">Thành công! Hành động của bạn đã được thực hiện.</div>
<div class="alert alert-danger">Lỗi! Đã xảy ra sự cố.</div>

Các biến thể Alerts

• .alert-warning: Cảnh báo
• .alert-info: Thông tin
• .alert-light, .alert-dark: Kiểu nền sáng và tối

Thêm nút đóng Alert
Alerts có thể đóng lại bằng cách thêm .alert-dismissible và nút <button> với .close:

<div class="alert alert-warning alert-dismissible fade show">
  Cảnh báo! Vui lòng kiểm tra thông tin.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

3. Badges trong Bootstrap

Badges giúp đánh dấu hoặc hiển thị số lượng thông tin:

<span class="badge bg-primary">Mới</span>
<span class="badge bg-success">Hoàn thành</span>

Gắn Badge vào Button

<button class="btn btn-primary">
  Thông báo <span class="badge bg-light text-dark">4</span>
</button>

4. So sánh CSS thuần và Bootstrap

5. Bài tập thực hành

Yêu cầu:

• Tạo một trang hiển thị thông báo với button, alert và badge bằng Bootstrap.
• Thử sử dụng nút đóng alert và button có badge.

Ví dụ HTML:

<button class="btn btn-primary">Nhấn vào đây</button>
<div class="alert alert-info mt-3">Đây là một thông báo thông tin.</div>
<button class="btn btn-danger">
  Thông báo <span class="badge bg-light text-dark">3</span>
</button>

6. Kết luận

Trong bài này, bạn đã học cách sử dụng buttons, alerts và badges trong Bootstrap để xây dựng giao diện hiện đại và tiện dụng. Hãy tiếp tục thực hành để làm chủ các thành phần này!