Cảnh báo Bootstrap 5
Cảnh báo
Bootstrap 5 cung cấp một cách dễ dàng để tạo các thông báo cảnh báo được xác định trước:
Cảnh báo được tạo bằng lớp .alert
, theo sau là một trong các lớp theo ngữ cảnh .alert-success
, .alert-info
, .alert-warning
, .alert-danger
, .alert-primary
, .alert-secondary
, .alert-light
hoặc .alert-dark
:
Ví dụ
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Hãy tự mình thử » Liên kết cảnh báo
Thêm lớp .alert-link
vào bất kỳ liên kết nào bên trong hộp cảnh báo để tạo "các liên kết có màu phù hợp":
Ví dụ
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
Hãy tự mình thử »Cảnh báo đóng cửa
Để đóng thông báo cảnh báo, hãy thêm lớp .alert-dismissible
vào vùng chứa cảnh báo. Sau đó thêm class="btn-close"
và data-bs-dismiss="alert"
vào một liên kết hoặc thành phần nút (khi bạn nhấp vào đây, hộp cảnh báo sẽ biến mất).
Ví dụ
<div class="alert alert-success alert-dismissible">
<button
type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Success!</strong> This alert box could indicate a successful or
positive action.
</div>
Hãy tự mình thử »Cảnh báo hoạt hình
Các lớp .fade
và .show
thêm hiệu ứng mờ dần khi đóng thông báo cảnh báo: