Cảnh báo Bootstrap 5

Cảnh báo

Bootstrap 5 cung cấp một cách đơn giản để tạo cảnh báo thông báo được định nghĩa trước:

Cảnh báo được tạo bằng cách sử dụng loại .alert, sau đó là một trong các loại lớp ngữ cảnh:

  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light
  • .alert-dark

Mô hình

<div class="alert alert-success">
  <strong>Thành công!</strong> Cảnh báo này biểu thị thành công hoặc hành động tích cực.
</div>

Thử ngay

Liên kết cảnh báo

Đặt .alert-link Loại thêm vào bất kỳ liên kết nào trong khung cảnh báo có thể tạo ra "liên kết màu tương ứng":

Mô hình

<div class="alert alert-success">
  <strong>Thành công!</strong> Bạn nên <a href="#" class="alert-link">đọc thông báo này</a>.
</div>

Thử ngay

Đóng cảnh báo

Nếu bạn muốn đóng thông báo cảnh báo, hãy thêm .alert-dismissible Loại thêm vào khay cảnh báo. Sau đó, class="btn-close" và data-bs-dismiss="alert" Thêm vào liên kết hoặc yếu tố nút (khi bạn nhấp vào nó, cảnh báo sẽ biến mất).

Mô hình

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>Thành công!</strong> Cảnh báo này biểu thị thành công hoặc hành động tích cực.
</div>

Thử ngay

Chuyển động cảnh báo

.fade và .show Loại thêm vào thông báo cảnh báo để thêm hiệu ứng mờ vào và ra khi đóng thông báo cảnh báo:

Mô hình

<div class="alert alert-danger alert-dismissible fade show">

Thử ngay