警告

定义成功、警告和错误消息的样式。

用法

要应用此组件，请将 .uk-alert 类添加到块元素。

示例

标记

<div class="uk-alert">...</div>

关闭按钮

要应用关闭按钮，请将 .uk-alert-close 类添加到警告框内的 <button> 或 <a> 元素。要为关闭按钮启用 JavaScript，只需将 data-uk-alert 属性添加到警告框。我们建议添加 关闭组件 中的 .uk-close 类，为按钮提供适当的样式，当然您也可以使用文本或图像。

示例

标记

<div class="uk-alert" data-uk-alert>
    <a href="" class="uk-alert-close uk-close"></a>
    <p>...</p>
</div>

颜色修饰符

有几个可用的颜色修饰符。只需添加以下类之一即可应用不同的外观。

示例

标记

<div class="uk-alert uk-alert-success"> ... </div>
<div class="uk-alert uk-alert-warning">...</div>
<div class="uk-alert uk-alert-danger">...</div>

尺寸修饰符

添加 .uk-alert-large 类以增加警告框中的间距。如果要使用更丰富的排版，这会很有用。

示例

标记

<div class="uk-alert uk-alert-large">...</div>