Source

警报

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

例子

警报可用于任何长度的文本，以及可选的关闭按钮。要获得正确的样式，请使用八个必需的上下文类之一（例如，.alert-success）。对于内联解雇，请使用alerts 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实用程序类在任何警报中快速提供匹配的彩色链接。

这是带有示例链接的主要警报。如果您愿意，请单击它。

这是带有示例链接的辅助警报。如果您愿意，请单击它。

这是带有示例链接的成功警报。如果您愿意，请单击它。

这是带有示例链接的危险警报。如果您愿意，请单击它。

这是带有示例链接的警告警报。如果您愿意，请单击它。

这是带有示例链接的信息警报。如果您愿意，请单击它。

这是一个带有示例链接的轻警报。如果您愿意，请单击它。

这是带有示例链接的黑暗警报。如果您愿意，请单击它。

<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 元素，如标题、段落和分隔符。

做得好！

哇，是的，您成功阅读了这条重要的警报消息。此示例文本将运行更长的时间，以便您可以看到警报中的间距如何与此类内容一起使用。

每当您需要时，请务必使用边距实用程序来保持整洁。

<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按钮。
在关闭按钮上，添加data-dismiss="alert"触发 JavaScript 功能的属性。确保将<button>元素与它一起使用，以便在所有设备上保持正确的行为。
要在解除警报时为警报设置动画，请务必添加.fade和.show类。

您可以通过现场演示看到这一点：

神圣的鳄梨酱！您应该检查下面的一些字段。

<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()

或者在 alertdata中的按钮上使用属性，如上所示：

<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')

活动

Bootstrap 的警报插件公开了一些用于连接警报功能的事件。

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

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