Cảnh báo Bootstrap 4
Cảnh báo Bootstrap 4
Bootstrap 4 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="close"
và data-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="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Hãy tự mình thử » Mẹo: × (×) là một thực thể HTML và là biểu tượng ưa thích cho các nút đóng, thay vì chữ cái "x".
Để biết danh sách tất cả các Thực thể HTML, hãy truy cập Tham khảo Thực thể HTML của chúng tôi .
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:
Tham khảo cảnh báo Bootstrap 4 hoàn chỉnh
Để có tài liệu tham khảo đầy đủ về tất cả các tùy chọn, phương thức và sự kiện cảnh báo, hãy truy cập Tài liệu tham khảo cảnh báo JS Bootstrap 4 của chúng tôi.