Cảnh báo W3.CSS
Lớp w3-panel 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ảnh báo thường được hiển thị bằng màu sắc mạnh:
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.
Ví dụ
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Hãy tự mình thử »Hiển thị cảnh báo
Cảnh báo!
Màu vàng thường biểu thị cảnh báo có thể cần chú ý.
Cảnh báo!
Màu vàng thường biểu thị cảnh báo có thể cần chú ý.
Ví dụ
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that
might need attention.</p>
</div>
Hãy tự mình thử »Hiển thị thành công
Thành công!
Màu xanh lá cây thường chỉ ra đ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 chỉ ra điều gì đó thành công hoặc tích cực.
Ví dụ
<div class="w3-panel w3-green">
<h3>Success!</h3>
<p>Green often indicates something successful
or positive.</p>
</div>
Hãy tự mình thử »Hiển thị thông tin
Thông tin!
Màu xanh lam thường biểu thị sự thay đổi hoặc hành động mang tính thông tin trung lập.
Thông tin!
Màu xanh lam thường biểu thị sự thay đổi hoặc hành động mang tính thông tin trung lập.
Ví dụ
<div class="w3-panel w3-blue">
<h3>Information!</h3>
<p>Blue often indicates a neutral
informative change or action.</p>
</div>
Hãy tự mình thử »Sử dụng vùng chứa
Lớp w3-container cũng có thể được sử dụng để hiển thị cảnh báo:
Ví dụ
<div class="w3-container w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Hãy tự mình thử » Cảnh báo ở tất cả các màu
Cảnh báo thường được hiển thị bằng các màu đặc biệt, nhưng có thể sử dụng bất kỳ màu nà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.
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.
Ví dụ
<div class="w3-panel w3-blue-grey">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Hãy tự mình thử »Cảnh báo đóng cửa
Để đóng hộp cảnh báo, nhấp vào dấu 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 dấu X đóng cảnh báo, hãy thêm phần tử <span> với lớp w3-button và sự kiện onclick :
Ví dụ
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">×</span>
Hãy tự mình thử »Mẹo: HTML × thực thể là biểu tượng ưa thích cho các nút đóng (chứ không phải 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 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.
Cảnh báo dưới dạng thẻ
Sử dụng lớp 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 chỉ ra điều gì đó cần được chú ý.