W3.CSS Alerts (警报)
在 w3-panel 类可以完美的显示所有类型的警报:
显示警告
实例
<div class="w3-panel w3-yellow">
<h3>警告!</h3>
<p>黄色通常表示可能需要注意的警告。</p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
显示成功
显示信息
实例
<div class="w3-panel w3-blue">
<h3>信息!</h3>
<p>蓝色通常表示中性的信息变化或行动。</p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
使用容器
w3-container 类,也可以用来显示警报:
实例
<div class="w3-container w3-red">
<h3>危险!</h3>
<p>红色通常表示危险或负面情况。</p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
各种颜色的警报
警报通常以特殊颜色显示,但可以使用任何颜色:
实例
<div class="w3-panel w3-blue-grey">
<h3>危险!</h3>
<p>红色通常表示危险或负面情况。</p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
关闭警报
要创建关闭警报的 X,需添加带有类 w3-button 和 onclick 事件的 <span> 元素 :
实例
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-topright">×</span>
尝试一下 »
点击“尝试一下”按钮查看在线实例
提示: HTML &times; 实体是关闭按钮的首选图标(而不是字母“ X”)。
圆角化警告
如果需要圆角,请使用 w3-round 类:
卡片式警告
如果要将警报显示为卡片,请使用 w3-card 类:
更多建议: