Cảnh báo khởi động
Cảnh báo
Bootstrap 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 bốn lớp theo ngữ cảnh .alert-success , .alert-info , .alert-warning hoặc .alert-danger :
Ví dụ
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Indicates a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Indicates a dangerous or potentially negative 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">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Hãy tự mình thử » Thuộc tính aria-* và &time; giải trình
Để giúp cải thiện khả năng truy cập cho những người sử dụng trình đọc màn hình, bạn nên bao gồm thuộc tính aria-label="close" khi tạo nút đóng.
& lần; (×) 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à .in 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 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 Bootstrap JS của chúng tôi.
