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…
})