Skip to main content Skip to docs navigation

警报

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

目录

示例

¥Examples

警报可用于任何长度的文本，以及可选的关闭按钮。为了获得正确的样式，请使用八个必需的上下文类之一（例如，.alert-success）。对于内联退出，请使用 警报 JavaScript 插件。

¥Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts JavaScript plugin.

Heads up! As of v5.3.0, the alert-variant() Sass mixin is deprecated. Alert variants now have their CSS variables overridden in a Sass loop.
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>
Accessibility tip: Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a sufficient color contrast) or is included through alternative means, such as additional text hidden with the .visually-hidden class.

在线示例

¥Live example

单击下面的按钮显示警报（以内联样式隐藏以启动），然后使用内置关闭按钮关闭（并销毁）它。

¥Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.

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

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

¥We use the following JavaScript to trigger our live alert demo:

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

¥Link color

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

¥Use the .alert-link utility class to quickly provide matching colored links within any alert.

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>

附加内容

¥Additional content

警报还可以包含其他 HTML 元素，例如标题、段落和分隔线。

¥Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

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 实用程序 和 Bootstrap Icons 创建带有图标的警报。根据你的图标和内容，你可能需要添加更多工具或自定义样式。

¥Similarly, you can use flexbox utilities and Bootstrap Icons to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.

html 
<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" class="bi 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 精灵，以便轻松地重复引用相同的图标。

¥Need more than one icon for your alerts? Consider using more Bootstrap Icons and making a local SVG sprite like so to easily reference the same icons repeatedly.

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>

退出

¥Dismissing

使用警报 JavaScript 插件，可以消除任何内联警报。就是这样：

¥Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:

  • 确保你已加载警报插件或已编译的 Bootstrap JavaScript。

    ¥Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript.

  • 添加 关闭按钮 和 .alert-dismissible 类，这会在警报右侧添加额外的填充并放置关闭按钮。

    ¥Add a close button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the close button.

  • 在关闭按钮上，添加 data-bs-dismiss="alert" 属性，该属性会触发 JavaScript 功能。请务必将 <button> 元素与它一起使用，以便在所有设备上都能正常运行。

    ¥On the close button, add the data-bs-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behavior across all devices.

  • 要在消除警报时为警报设置动画，请务必添加 .fade 和 .show 类。

    ¥To animate alerts when dismissing them, be sure to add the .fade and .show classes.

你可以通过在线演示来了解这一点：

¥You can see this in action with a live demo:

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>
When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the closed.bs.alert event and programmatically sets focus() to the most appropriate location in the page. If you’re planning to move focus to a non-interactive element that normally does not receive focus, make sure to add tabindex="-1" to the element.

CSS

变量

¥Variables

Added in v5.2.0

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

¥As part of Bootstrap’s evolving CSS variables approach, alerts now use local CSS variables on .alert for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

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 变量

¥Sass variables

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 混入

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

¥Sass loops

循环生成带有覆盖 CSS 变量的修饰符类。

¥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 行为

¥JavaScript behavior

初始化

¥Initialize

将元素初始化为警报

¥Initialize elements as alerts

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

For the sole purpose of dismissing an alert, it isn’t necessary to initialize the component manually via the JS API. By making use of data-bs-dismiss="alert", the component will be initialized automatically and properly dismissed.

See the triggers section for more details.

触发器

¥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 中删除。

¥Note that closing an alert will remove it from the DOM.

方法

¥Methods

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

¥You can create an alert instance with the alert constructor, for example:

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

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

¥This makes an alert listen for click events on descendant elements which have the data-bs-dismiss="alert" attribute. (Not necessary when using the data-api’s auto-initialization.)

Method Description
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.
dispose Destroys an element’s alert. (Removes stored data on the DOM element)
getInstance Static method which allows you to get the alert instance associated to a DOM element. For example: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: bootstrap.Alert.getOrCreateInstance(element).

基本用法：

¥Basic usage:

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

活动

¥Events

Bootstrap 的警报插件公开了一些用于钩子警报功能的事件。

¥Bootstrap’s alert plugin exposes a few events for hooking into alert functionality.

Event Description
close.bs.alert Fires immediately when the close instance method is called.
closed.bs.alert Fired when the alert has been closed and CSS transitions have completed. 
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()
})