View on GitHub

警告框（Alerts）

针对典型的用户操作，提供大量可用且灵活的警报信息。

On this page

示例

警报可用于任何长度的文本，也可选择关闭按钮。要使用正确的样式，请使用八个必备上下文类之一（例如，.alert-success）。如需内嵌解除，请使用alerts JavaScript 插件。

注意！ 从 v5.3.0 起，alert-variant() Sass mixin 已被弃用。Alert 变体现在可以在 a Sass loop 中重写 CSS 变量。

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!

html

<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类隐藏的附加文本）明显看出含义。

现场示例

单击下面的按钮可显示警报（开始时使用内嵌样式隐藏），然后使用内置的关闭按钮解除（和销毁）警报。

html

<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

我们使用以下 JavaScript 来触发实时警报演示：

site/assets/js/partials/snippets.js

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
const appendAlert = (message, type) => {
  const wrapper = document.createElement('div')
  wrapper.innerHTML = [
    `<div class="alert alert-${type} alert-dismissible" role="alert">`,
    `   <div>${message}</div>`,
    '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
    '</div>'
  ].join('')

  alertPlaceholder.append(wrapper)
}

const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
  alertTrigger.addEventListener('click', () => {
    appendAlert('Nice, you triggered this alert message!', 'success')
  })
}

链接颜色

使用.alert-link 工具类可在任何警报中快速提供匹配的彩色链接。

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.

html

<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 元素，如标题、段落和分隔线。

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.

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>

图标

同样，您可以使用 flexbox 实用工具和 Bootstrap 图标来创建带图标的提醒。根据图标和内容的不同，您可能需要添加更多实用程序或自定义样式。

An example alert with an icon

html

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div>
    An example alert with an icon
  </div>
</div>

警报需要多个图标？可以考虑使用更多的 Bootstrap 图标，并制作类似的本地 SVG sprite，以方便重复引用相同的图标。

An example alert with an icon

An example success alert with an icon

An example warning alert with an icon

An example danger alert with an icon

html

<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
  <symbol id="check-circle-fill" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </symbol>
  <symbol id="info-fill" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </symbol>
  <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </symbol>
</svg>

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
  <div>
    An example alert with an icon
  </div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
  <div>
    An example success alert with an icon
  </div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example warning alert with an icon
  </div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example danger alert with an icon
  </div>
</div>

移除

使用警报 JavaScript 插件，可以解除任何内联警报。具体方法如下

确保已加载警报插件或已编译的 Bootstrap JavaScript。
添加关闭按钮和.alert-dismissible 类，该类会在提示右侧添加额外的填充，并定位关闭按钮。
在关闭按钮上添加 data-bs-dismiss="alert" 属性，以触发 JavaScript 功能。请务必将 <button> 元素与之配合使用，以便在所有设备上正常运行。
要在解除警报时将其制成动画，请务必添加 .fade 和 .show 类。

您可以通过现场演示了解这一功能：

Holy guacamole! You should check in on some of those fields below.

html

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

CSS

变量

Added in v5.2.0

作为 Bootstrap 不断发展的 CSS 变量方法的一部分，警报现在使用.alert上的本地 CSS 变量来增强实时自定义功能。CSS 变量的值通过 Sass 设置，因此仍支持 Sass 自定义。

scss/_alert.scss

--#{$prefix}alert-bg: transparent;
--#{$prefix}alert-padding-x: #{$alert-padding-x};
--#{$prefix}alert-padding-y: #{$alert-padding-y};
--#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
--#{$prefix}alert-color: inherit;
--#{$prefix}alert-border-color: transparent;
--#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
--#{$prefix}alert-border-radius: #{$alert-border-radius};
--#{$prefix}alert-link-color: inherit;

Sass 变量

scss/_variables.scss

$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           var(--#{$prefix}border-radius);
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            var(--#{$prefix}border-width);
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

Sass mixins

Deprecated in v5.3.0

scss/mixins/_alert.scss

@mixin alert-variant($background, $border, $color) {
  --#{$prefix}alert-color: #{$color};
  --#{$prefix}alert-bg: #{$background};
  --#{$prefix}alert-border-color: #{$border};
  --#{$prefix}alert-link-color: #{shade-color($color, 20%)};

  @if $enable-gradients {
    background-image: var(--#{$prefix}gradient);
  }

  .alert-link {
    color: var(--#{$prefix}alert-link-color);
  }
}

Sass 循环

Loop that generates the modifier classes with an overriding of CSS variables.

scss/_alert.scss

// Generate contextual modifier classes for colorizing the alert
@each $state in map-keys($theme-colors) {
  .alert-#{$state} {
    --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
  }
}

JavaScript 行为

初始化

将元素初始化为警报

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new bootstrap.Alert(element))

仅出于解除警报的目的，无需通过 JS API 手动初始化组件。通过使用 data-bs-dismiss="alert"，组件将自动初始化并正确解除。

更多详情，请参阅 triggers 部分。

触发器

Dismissal can be achieved with the data-bs-dismiss attribute on a button within the alert as demonstrated below:

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

or on a button outside the alert using the additional data-bs-target as demonstrated below:

<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>

注意，关闭警报会将其从 DOM 中移除。

方法

例如，您可以使用警报构造函数创建警报实例：

const bsAlert = new bootstrap.Alert('#myAlert')

这将使警报监听具有 data-bs-dismiss="alert" 属性的后代元素上的点击事件。（使用 data-api 的自动初始化时不需要）。

Method	Description
`close`	从 DOM 中移除警报，从而关闭警报。如果元素上有 `.fade` 和 `.show` 类，警报会在移除前淡出。
`dispose`	销毁元素的警报。（删除 DOM 元素上存储的数据）
`getInstance`	静态方法，用于获取与 DOM 元素相关联的警报实例。例如：`bootstrap.Alert.getInstance(alert)`。
`getOrCreateInstance`	静态方法，用于返回与 DOM 元素相关联的警报实例，或在未初始化的情况下创建一个新实例。您可以这样使用它 `bootstrap.Alert.getOrCreateInstance(element)`。

基本用法:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
alert.close()

事件

Bootstrap 的警报插件提供了一些事件，用于连接警报功能。

Event	Description
`close.bs.alert`	当调用 `close` 实例方法时立即触发。
`closed.bs.alert`	警报关闭且 CSS 过渡完成后触发。

const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', event => {
  // 例如，明确地将焦点移到最合适的元素上、
  // 这样就不会丢失/重置到页面的起始位置
  // document.getElementById('...').focus()
})