W3.CSS 警报

这个w3面板class 是显示所有类型警报的完美类：

危险！

红色通常表示危险或消极的情况。

警报通常使用强烈的颜色显示：

危险！

红色通常表示危险或消极的情况。

示例

<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>

亲自试一试»

显示警告

警告！

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

警告！

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

示例

<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that might need attention.</p>
</div>

亲自试一试»

显示成功

成功！

绿色通常表示成功或积极的事情。

成功！

绿色通常表示成功或积极的事情。

示例

<div class="w3-panel w3-green">
<h3>Success!</h3>
<p>Green often indicates something successful or positive.</p>
</div>

亲自试一试»

显示信息

信息！

蓝色通常表示中性的信息变化或行动。

信息！

蓝色通常表示中性的信息变化或行动。

示例

<div class="w3-panel w3-blue">
<h3>Information!</h3>
<p>Blue often indicates a neutral informative change or action.</p>
</div>

亲自试一试»

使用容器

这个w3-容器类也可用于显示警报：

示例

<div class="w3-container w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>

亲自试一试»

所有颜色的警报

警报通常以特殊颜色显示，但可以使用任何颜色：

危险！

红色通常表示危险或消极的情况。

危险！

红色通常表示危险或消极的情况。

危险！

红色通常表示危险或消极的情况。

危险！

红色通常表示危险或消极的情况。

危险！

红色通常表示危险或消极的情况。

示例

<div class="w3-panel w3-blue-grey">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>

亲自试一试»

关闭提醒

要关闭警报框，请单击右上角的 X：

危险！

红色通常表示危险或消极的情况。

要创建关闭警报的 X，请添加一个带有 class 的 <span> 元素w3按钮和单击时事件：

示例

亲自试一试»

提示：HTML×实体是关闭按钮的首选图标（而不是字母 "X"）。

圆形警报

使用w3-轮如果你想要圆角，请类：

成功！

这里使用w3-round。

成功！

这里使用w3-round-large。

成功！

这里使用了w3-round-xxlarge。

示例

亲自试一试»

警报卡

用一个w3卡如果您希望警报显示为卡片，请使用以下类：

警告！

黄色通常表示需要注意的事情。

示例

亲自试一试»