Source

警报

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

例子

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

一个简单的主要警报——检查一下！

一个简单的辅助警报——检查一下！

一个简单的成功警报——检查一下！

一个简单的危险警报——检查一下！

一个简单的警告警报——检查一下！

一个简单的信息警报——检查一下！

一个简单的灯光警报——检查一下！

一个简单的黑暗警报——检查一下！

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

向辅助技术传达意义

使用颜色来添加含义仅提供视觉指示，不会传达给辅助技术的用户 - 例如屏幕阅读器。确保由颜色表示的信息在内容本身（例如可见文本）中是显而易见的，或者通过替代方式包含在内，例如隐藏在.sr-only类中的附加文本。

链接颜色

使用.alert-link实用程序类在任何警报中快速提供匹配的彩色链接。

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

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

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

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

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

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

带有示例链接的简单灯光警报。如果您愿意，请单击它。

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

<div class="alert alert-primary" role="alert">
  A simple 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">
  A simple 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">
  A simple 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">
  A simple 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">
  A simple 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">
  A simple 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">
  A simple 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">
  A simple 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...
})