在GitHub上查看

警告提示框

为平常的用户操作提供上下文反馈消息，并提供少量可用且灵活的警报消息。

本页导航↓

示例

警报可用于任何长度的文本，以及一个可选的关闭按钮。为了获得合适的样式，可以使用八个必须的上下文类中的一个(例如，.alert-success )。对于内联解雇，使用 alerts JavaScript插件。

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

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

向辅助技术传达意义

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

链接颜色

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

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

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

做的好！

是的，你成功读取了这条重要的警告信息。这个示例文本将运行更长一些，以便您可以看到警报中的空格是如何与这类内容一起工作的。

每当需要时，请确保使用margin实用工具使事情保持整洁。

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

消除警告提示框

使用alert JavaScript插件，可以内联解除任何警报。方法如下:

确保您已经加载了alert插件，或者已编译的引导程序JavaScript。
添加一个关闭按钮和 .alert-dismissible 类，该类在警报的右侧添加额外的填充并定位关闭按钮。
在关闭按钮上，添加 data-bs-dismiss="alert" 属性，该属性将触发JavaScript功能。请确保将 <button> 元素与所有设备一起使用，以确保其行为正确。
要在取消警报时让它们动画化，请确保添加了 .fade 和 .show 类。

您可以通过现场演示看到这个示例:

Holy guacamole! You should check in on some of those fields below.

<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="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

当警报被解除时，元素将从页面结构中完全删除。如果键盘用户使用关闭按钮解除警报，他们的焦点会突然丢失，根据浏览器的不同，会重置到页面/文档的开头。由于这个原因，我们建议包括额外的JavaScript来监听 closed.bs.alert。警告事件并以编程方式将 focus() 设置到页面中最合适的位置。如果您计划将焦点移到通常不接收焦点的非交互式元素上，请确保向该元素添加 tabindex="-1" 。

JavaScript行为

触发器

通过JavaScript启用取消警告:

var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
new bootstrap.Alert(alert)
})

或在警报内的按钮上使用 data 属性，如上所示:

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

Note that closing an alert will remove it from the DOM.

方法

你可以用alert构造函数创建一个alert实例，例如:

var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)

这使得有 data-bs-dismiss="alert" 属性的后代元素的点击事件的监听警报。(在使用data-api的自动初始化时不需要)

方法	描述
`close`	通过从DOM中删除它来关闭警告提示框。如果元素上存在 `.fade` 和 `.show` ，则警告提示框将在被删除之前会淡入淡出。
`dispose`	销毁元素的警告提示框。（删除DOM元素上存储的数据）
`getInstance`	允许您获取与DOM元素关联的警告实例的静态方法，可以像这样使用它： `bootstrap.Alert.getInstance(alert)`

var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

事件

Bootstrap的alert插件公开了一些事件来连接alert功能。

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

var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
// do something, for instance, explicitly move focus to the most appropriate element,
  // so it doesn't get lost/reset to the start of the page
  // document.getElementById('...').focus()
})