警报(Alerts)

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

例子

警报(Alerts)适用于任何长度的文本,以及可选的关闭按钮。 为了获得适当的样式,请使用八个必需上下文类之一(例如,.alert-success`)。 对于内联解雇,请使用 alerts jQuery plugin

<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>
Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

链接颜色

使用.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>

附加内容

警报(Alerts)还可以包含其他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>

解雇(Dismissing)

使用警报JavaScript插件,可以内嵌任何警报。 就是这样:

  • 确保已加载警报插件或已编译的Bootstrap JavaScript。
  • 如果您是从源代码构建JavaScript,则它requires util.js。 编译的版本包括在里边。
  • 添加一个关闭按钮和.alert-dismissible类,这将在警报的右侧添加额外的填充并放置.close按钮。
  • 在关闭按钮上,添加data-dismiss =“ alert”属性,该属性会触发JavaScript功能。 确保在所有设备上都使用“
  • 要在关闭警报时制作动画,请确保添加.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行为

触发器(Triggers)

启用JavaScript dismissal消除警报(alert)的功能:

$('.alert').alert()

或在警告alert内的按钮上具有“数据data”属性,如上所示:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

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

方法

方法 描述
$().alert() Makes an alert listen for click events on descendant elements which have the data-dismiss="alert" attribute. (Not necessary when using the data-api’s auto-initialization.)
$().alert('close') Closes an alert by removing it from the DOM. If the .fade and .show classes are present on the element, the alert will fade out before it is removed.
$().alert('dispose') Destroys an element’s alert.
$('.alert').alert('close')

事件

Bootstrap警报插件公开了一些事件,可以挂接到警报功能上。

事件 描述
close.bs.alert This event fires immediately when the close instance method is called.
closed.bs.alert This event is fired when the alert has been closed (will wait for CSS transitions to complete).
$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})