警告框 - AuxUI - 模块化前端UI框架

警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息。

实例

将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert 类是必须要设置的，另外我们还提供了有特殊意义的4个类（例如，.alert-success），代表不同的警告信息。

成功！ 很好地完成了提交

信息!请注意这个信息

警告! 请不要提交

错误! 请进行一些更改

<div class="alert alert-success" role="alert">
  <strong>成功！</strong> 很好地完成了提交
</div>
<div class="alert alert-info" role="alert">
  <strong>信息!</strong>请注意这个信息
</div>
<div class="alert alert-warning" role="alert">
  <strong>警告!</strong> 请不要提交
</div>
<div class="alert alert-danger" role="alert">
  <strong>错误!</strong> 请进行一些更改
</div>

可关闭的警告框

为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮。

小提示!点击右侧关闭小图标可以关闭哦

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
  <strong>小提示!</strong>点击右侧关闭小图标可以关闭哦
</div>

确保在所有设备上的正确行为

务必给 <button> 元素添加 data-dismiss="alert" 属性。

警告框中的链接

用 .alert-link 工具类，可以为链接设置与当前警告框相符的颜色。

成功! 很好地完成了提交这是一个链接文本.

信息! 你还可以返回上一页, 进行操作

警告! 请不要提交返回上一页.

错误! 返回主页页面不存在

<div class="alert alert-success" role="alert">
  <strong>成功!</strong> 很好地完成了提交 <a href="#" class="alert-link">这是一个链接文本</a>.
</div>
<div class="alert alert-info" role="alert">
  <strong>信息!</strong> 你还可以 <a href="#" class="alert-link">返回上一页</a>, 进行操作
</div>
<div class="alert alert-warning" role="alert">
  <strong>警告!</strong> 请不要提交 <a href="#" class="alert-link">返回上一页</a>.
</div>
<div class="alert alert-danger" role="alert">
  <strong>错误!</strong> <a href="#" class="alert-link">返回主页</a> 页面不存在
</div>