信息提示框 | Alerts

使用少量可用且灵活的警报消息为典型的用户操作提供环境反馈消息。

示例

警报可用于任何长度的文本，以及可选的解除按钮。为了正确的样式，使用八个必需的上下文类之一（例如，.alert-success）。对于内联解雇，使用警报 jQuery 插件。

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert—check it out!
</div>

将意义传递给辅助技术

使用颜色来增加意义只能提供一种视觉指示，而不会传达给辅助技术的用户 - 如屏幕阅读器。确保由颜色表示的信息或者来自内容本身（例如可见文本），或者通过其他方式包含，例如隐藏在.sr-only类中的其他文本。

链接颜色

使用.alert-link工具类可以快速提供任何警报中匹配的彩色链接。

在 getbootstrap.com 上打开示例

<div class="alert alert-primary" role="alert">
  This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  This is a light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

其他内容

警报还可以包含其他 HTML 元素，如标题，段落和分隔符。

在 getbootstrap.com 上打开示例

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

驳回

使用警报 JavaScript 插件，可以解除任何内联警报。就是这样：

确保你已经加载了警报插件，或编译好的 Bootstrap JavaScript。

如果您从源代码构建我们的 JavaScript，则需要util.js。编译版本包括这个。

添加一个解雇按钮和.alert-dismissible类别，在警报的右侧添加额外的填充并定位.close按钮。

在 dismiss 按钮上，添加触发 JavaScript 功能的data-dismiss="alert"属性。请务必使用该<button>元素，以便在所有设备上正常运行。

要解除它们的动画时，请务必添加.fade和.show类。

你可以在现场演示中看到这一点：

在 getbootstrap.com 上打开示例

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

JavaScript 行为

触发器

通过 JavaScript 启用解除警报：

$(".alert").alert()

或者通过警报中的按钮上的data属性，如上所示：

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

请注意，关闭警报会将其从 DOM 中删除。

方法

方法	描述
$().alert()	使警报侦听具有 data-dismiss =“alert”属性的后代元素上的点击事件。（使用 data-api 的自动初始化时不需要）。
$().alert('close')	通过从 DOM 中删除警报来关闭警报。如果元素上存在.fade 和.show 类，则警告将在删除之前淡出。
$().alert('dispose')	销毁元素的警报。

$(".alert").alert('close')

活动

引导程序的警报插件公开了一些事件，以便挂接到警报功能。

事件	描述
close.bs.alert	该事件在调用 close 实例方法时立即触发。
closed.bs.alert	警报关闭时将触发此事件（将等待 CSS 转换完成）。

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2018-09-28