Bootstrap 4 Cảnh báo
Bootstrap 4 Cảnh báo
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 với .alertlớp, theo sau là một trong các lớp theo ngữ cảnh .alert-success,,, hoặc :
.alert-info.alert-warning.alert-danger.alert-primary.alert-secondary.alert-light.alert-dark
Thí dụ
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Liên kết cảnh báo
Thêm alert-linklớp vào bất kỳ liên kết nào bên trong hộp cảnh báo để tạo "liên kết có màu phù hợp":
Thí dụ
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
Đóng cảnh báo
Để đóng thông báo cảnh báo, hãy thêm một .alert-dismissible
lớp 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 một phần tử nút (khi bạn nhấp vào hộp này, hộp cảnh báo sẽ biến mất).
Thí 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>
Mẹo: & lần; (×) là một thực thể HTML là biểu tượng được ưu tiên cho các nút đóng, thay vì ký tự "x".
Để có danh sách tất cả các Đối tượng HTML, hãy truy cập Tham chiếu các Đối tượng HTML của chúng tôi .
Cảnh báo động
Các lớp .fadevà .showthêm hiệu ứng mờ dần khi đóng thông báo cảnh báo:
Thí dụ
<div class="alert alert-danger
alert-dismissible fade show">
Toàn bộ Tham chiếu Cảnh báo Bootstrap 4
Để có tài liệu tham khảo đầy đủ về tất cả các tùy chọn, phương pháp 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 .