跳到主题内容 跳到文档导航栏

警告框

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

示例

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

<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实用程序类可以在任何警告中快速提供匹配的彩色链接。

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

解除

使用alert JavaScript插件,可以关闭任何内联警告。方法如下:

  • 确保已加载警告插件或已编译的 Bootstrap JavaScript.
  • 添加一个关闭按钮 和. .alert-dismissible 类,该类在警告的右侧添加额外的填充,并定位关闭按钮。
  • 在关闭按钮上,添加data-bs-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="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>

请注意,关闭警告会将其从DOM中删除。

方法

可以使用警告构造函数创建警告实例,例如:

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的警告插件公开了一些事件,用于连接警告功能。

事件 描述
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()
})