Bootstrap V5.3 : Alerts 警告框中文翻译版

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

例子

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

小心！从 v5.3.0 开始，Sass mixin 已被弃用。警报变体现在在 Sass 循环中覆盖了它们的 CSS 变量。alert-variant()

一个简单的主要警报 – 检查一下！

一个简单的辅助警报 – 检查一下！

一个简单的成功警报——看看吧！

一个简单的危险警报——看看吧！

一个简单的警告警报——看看吧！

一个简单的信息提醒——看看吧！

一个简单的灯光警报——看看吧！

一个简单的黑暗警报——看看吧！

[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 来触发实时警报演示：

网站/src/assets/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

带有示例链接的简单主警报。如果您愿意，请点击一下。

带有示例链接的简单辅助警报。如果您愿意，请点击一下。

带有示例链接的简单成功警报。如果您愿意，请点击一下。

带有示例链接的简单危险警报。如果您愿意，请点击一下。

带有示例链接的简单警告警报。如果您愿意，请点击一下。

带有示例链接的简单信息警报。如果您愿意，请点击一下。

带有示例链接的简单灯光警报。如果您愿意，请点击一下。

带有示例链接的简单暗警报。如果您愿意，请点击一下。

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

干的好！

啊，是的，您成功阅读了这条重要的警报消息。此示例文本将运行更长一些，以便您可以了解警报中的间距如何处理此类内容。

每当您需要时，请务必使用保证金实用程序来保持整洁。

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

带有图标的警报示例

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

带有图标的警报示例

带有图标的成功警报示例

带有图标的警告警报示例

带有图标的危险警报示例

[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
在关闭按钮上，添加触发 JavaScript 功能的属性。请务必将该元素与它一起使用，以便在所有设备上正常运行。data-bs-dismiss="alert"<button>
要在关闭警报时对警报进行动画处理，请务必添加和类。.fade.show

您可以通过现场演示看到这一点：

天哪鳄梨酱！您应该检查下面的一些字段。

[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.alertfocus()tabindex="-1"

CSS系统

Variables

Added in v5.2.0

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

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

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

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

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"

有关更多详细信息，请参阅触发器部分。

触发器

可以使用警报中按钮上的属性来实现关闭，如下所示：data-bs-dismiss

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

或在警报外部的按钮上使用附加按钮，如下所示：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-api 的自动初始化时不需要。data-bs-dismiss="alert"

方法	描述
`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()
})

Bootstrap V5.3 中文手册

入门指南 Getting started

定制化 Customize

布局方式 Layout

内容样式 Content

表单控件 Forms

组件集合 Components

辅助工具 Helpers

工具类库 Utilities

功能扩展 Extend

关于Bootstrap

Alerts 警告框

例子

实时示例

链接颜色

其他内容

干的好！

图标

解雇

CSS系统

Variables

Sass 变量

Sass 混合

Sass 循环

JavaScript 行为

初始化

触发器

方法

事件