警报（Alerts）

使用少数可用且灵活的警报消息为典型用户操作提供上下文反馈消息。

当前页

示例

警报可用于任何长度的文本，以及可选的关闭按钮。为了正确设置样式，请使用它们八个必需的上下文类中的一个（例如，.alert-success）。对于内联消除，请使用 alerts JavaScript 插件。

抬头！ 从 v5.3.0 开始，alert-variant() Sass mixin 已被弃用。警报变体现在在 Sass 循环中覆盖其 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 来触发我们的实时警报演示：

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')

const alert = (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', () => {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

链接颜色(Link color)

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

Icons

同样，您可以使用 flexbox utilities 和 Bootstrap Icons 来创建带有图标的警报。根据您的图标和内容，您可能需要添加更多实用程序或自定义样式。

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 精灵，以便轻松重复引用相同的图标。

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" style="display: 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>

消除警报（Dismissing）

使用警报 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-bg-scale:                -80%;
$alert-border-scale:            -70%;
$alert-color-scale:             40%;
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

Sass mixin

在 v5.3.0 版本中弃用

与$theme-colors结合使用，为我们的警报创建上下文修饰符类。

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 循环

使用alert-variant()mixin生成修饰符类的循环。

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）

可以通过在 alert 中的按钮上的data-bs-dismiss属性来实现关闭，如下所示：

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

或在 alert 外部的按钮上，使用额外的data-bs-target，如下所示：

<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"属性。（使用数据 API 的自动初始化时不需要）。

方法	描述
`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的警报插件公开了一些事件，用于挂钩到警报功能。

事件	描述
`close.bs.alert`	调用`close`实例方法时立即触发。
`closed.bs.alert`	在警报关闭且 CSS 过渡完成时触发。

const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', event => {
  // do something, for instance, explicitly move focus to the most appropriate element,
  // so it doesn't get lost/reset to the start of the page
  // document.getElementById('...').focus()
})