W3.CSS Alerts (警报)

2020-11-30 15:42 更新

在 w3-panel 类可以完美的显示所有类型的警报:

实例

<div class="w3-panel w3-red">

  <h3>危险!</h3>

  <p>红色通常表示危险或负面情况。</p>

</div> 


尝试一下 »
点击“尝试一下”按钮查看在线实例

显示警告

实例

<div class="w3-panel w3-yellow">

  <h3>警告!</h3>

  <p>黄色通常表示可能需要注意的警告。</p>

</div> 


尝试一下 »
点击“尝试一下”按钮查看在线实例

显示成功

实例

<div class="w3-panel w3-green">

  <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 类:

实例

<div class="w3-panel w3-green w3-round">


尝试一下 »
点击“尝试一下”按钮查看在线实例

卡片式警告

如果要将警报显示为卡片,请使用 w3-card 类:

实例

<div class="w3-panel w3-yellow w3-card-4">


尝试一下 »
点击“尝试一下”按钮查看在线实例


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号