View on GitHub

警告框（Alert）

通过精炼且灵活的警告消息为典型的用户操作提供契合上下文的反馈。

示例

警告框（alert）组件能够展示任意长度的文本以及一个可选的关闭按钮。为了展示合适的样式，必须从下列 8 个情境类（例如 .alert-success）中选择一个合适的并使用。中选择一个合适的并使用。如需内联一个关闭按钮，请使用警告框（alert）的 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>

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 工具类可以为任何警告框（alert）组件添加颜色相匹配的链接。

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>

添加其它内容

警告框（alert）组件还可以包含其它 HTML 元素，例如标题、段落、分割线等。

Well done!

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.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

<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）组件添加内联的关闭按钮。步骤如下：

确保已加载了警告框（alert）组件的 JavaScript 插件，或者是 Bootstrap 的预编译 JavaScript 文件。
如果你是自行编译的 JavaScript 源码，那么需要依赖 util.js 文件。预编译版本已经包含了该文件。
添加关闭按钮和 .alert-dismissible 类，这将在警告框（alert）组件的右侧增加额外的空间并放置关闭按钮（ .close）。
在关闭按钮上添加 data-dismiss="alert" 属性，该属性会触发 JavaScript 代码。请务必使用 <button> 元素，以确保在所有设备上都具有正确的行为。
如需在关闭警告框（alert）时展示动画效果，请确保添加 .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="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

通过 JavaScript 触发行为

触发器

通过 JavaScript 代码关闭警告框（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()`	让警告框（alert）能够监听具有 `data-dismiss="alert"` 属性的子元素上的点击事件。（如果使用的是 data 属性 API 来自动初始化组件的话，则不需要调用此函数。）
`$().alert('close')`	关闭警告框（alert）并将其从 DOM 中删除。如果该元素被设置了 `.fade` 和 `.show` 类的话，则警告框（alert）将在被删除之前展示逐渐消散（fade out）的效果。
`$().alert('dispose')`	销毁某个元素的警告框（alert）

$('.alert').alert('close')

本组件所暴露的事件

Bootstrap 的警告框（alert）插件暴露了一些可以监听的事件。

事件	描述
`close.bs.alert`	当 `close` 实例方法被调用时，该事件被立即触发。
`closed.bs.alert`	当警告框（alert）已关闭时（并将等待 CSS transitions 执行完），该事件将被触发。

$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})