提醒框

提醒框可以为用户提供醒目的操作提示。

实例

提醒框可用于任何长度的内容,还可以选择性地加入关闭按钮。 要获得正确的展示效果,请使用 .alert-* 系列类,一共8个效果。

<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使用 .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 插件,他能够将提醒框关闭,方法如下:

你可以查看下面的实例:

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