Cảnh báo W3.CSS
Lớp bảng điều khiển w3 là lớp hoàn hảo để hiển thị tất cả các loại cảnh báo:
Sự nguy hiểm!
Màu đỏ thường biểu thị một tình huống nguy hiểm hoặc tiêu cực.
Các cảnh báo thường được hiển thị bằng màu đậm:
Sự nguy hiểm!
Màu đỏ thường biểu thị một tình huống nguy hiểm hoặc tiêu cực.
Thí dụ
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Cảnh báo hiển thị
Cảnh báo!
Màu vàng thường chỉ ra một cảnh báo có thể cần chú ý.
Cảnh báo!
Màu vàng thường chỉ ra một cảnh báo có thể cần chú ý.
Thí dụ
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that
might need attention.</p>
</div>
Hiển thị Successs
Thành công!
Màu xanh lá cây thường biểu thị điều gì đó thành công hoặc tích cực.
Thành công!
Màu xanh lá cây thường biểu thị điều gì đó thành công hoặc tích cực.
Thí dụ
<div class="w3-panel w3-green">
<h3>Success!</h3>
<p>Green often indicates something successful
or positive.</p>
</div>
Thông tin hiển thị
Thông tin!
Màu xanh lam thường biểu thị một hành động hoặc thay đổi mang tính thông tin trung tính.
Thông tin!
Màu xanh lam thường biểu thị một hành động hoặc thay đổi mang tính thông tin trung tính.
Thí dụ
<div class="w3-panel w3-blue">
<h3>Information!</h3>
<p>Blue often indicates a neutral
informative change or action.</p>
</div>
Sử dụng Container
Lớp w3-container cũng có thể được sử dụng để hiển thị các cảnh báo:
Thí dụ
<div class="w3-container w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Cảnh báo bằng tất cả các màu
Các cảnh báo thường được hiển thị bằng các màu đặc biệt, nhưng bất kỳ màu nào cũng có thể được sử dụng:
Sự nguy hiểm!
Màu đỏ thường biểu thị một tình huống nguy hiểm hoặc tiêu cực.
Sự nguy hiểm!
Màu đỏ thường biểu thị một tình huống nguy hiểm hoặc tiêu cực.
Sự nguy hiểm!
Màu đỏ thường biểu thị một tình huống nguy hiểm hoặc tiêu cực.
Sự nguy hiểm!
Màu đỏ thường biểu thị một tình huống nguy hiểm hoặc tiêu cực.
Sự nguy hiểm!
Màu đỏ thường biểu thị một tình huống nguy hiểm hoặc tiêu cực.
Thí dụ
<div class="w3-panel w3-blue-grey">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Đóng cảnh báo
Để đóng hộp cảnh báo, hãy nhấp vào X ở góc trên bên phải:
Sự nguy hiểm!
Màu đỏ thường biểu thị một tình huống nguy hiểm hoặc tiêu cực.
Để tạo X đóng cảnh báo, hãy thêm phần tử <span> với nút w3 lớp và sự kiện onclick :
Thí dụ
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">×</span>
Mẹo: HTML & times; entity là biểu tượng ưu tiên cho các nút đóng (thay vì chữ "X").
Cảnh báo làm tròn
Sử dụng các lớp w3-round nếu bạn muốn các góc được làm tròn:
Thành công!
Ở đây w3-round được sử dụng.
Thành công!
Ở đây w3-round-large được sử dụng.
Thành công!
Ở đây w3-round-xxlarge được sử dụng.
Thí dụ
<div class="w3-panel w3-green w3-round">
Cảnh báo dưới dạng thẻ
Sử dụng loại thẻ w3 nếu bạn muốn cảnh báo được hiển thị dưới dạng thẻ:
Cảnh báo!
Màu vàng thường biểu thị một cái gì đó cần được chú ý.
Thí dụ
<div class="w3-panel w3-yellow w3-card-4">