在 GitHub 上查看

警报

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

示例

警报适用于任何长度的文本，以及可选的关闭按钮。为了正确设置样式，请使用八个必需的上下文类之一（例如，.alert-success）。对于内联关闭，请使用警报 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()

或使用 警报中按钮上的 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')

事件

Bootstrap 的警报插件公开了几个事件，用于连接到警报功能。

事件	说明
`close.bs.alert`	当调用 `close` 实例方法时，此事件会立即触发。
`closed.bs.alert`	当警报关闭时触发此事件（将等待 CSS 过渡完成）。

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