关闭按钮 · Bootstrap 6.0 中文文档

示例

提供一个选项来关闭或关闭组件 .btn-close. 该图标使用 CSS 渲染 mask-image，所以它继承了 color 从 .btn-close 类——不需要内联 SVG。 确保为屏幕阅读器包含文本，正如我们所做的那样 aria-label.

HTML

<button type="button" class="btn-close" aria-label="关闭"></button>

禁用状态

禁用的关闭按钮会改变它们的 opacity。我们还应用了 pointer-events: none 和 user-select: none 来防止触发悬停和激活状态。

HTML

<button type="button" class="btn-close" disabled aria-label="关闭"></button>

深色变体

将data-bs-theme="dark"添加到.btn-close，或添加到其父元素，以反转关闭按钮。在暗模式下会自动发生此操作。

HTML

<div data-bs-theme="dark">
  <button type="button" class="btn-close" aria-label="关闭"></button>
  <button type="button" class="btn-close" disabled aria-label="关闭"></button>
</div>

CSS

变量

关闭按钮在.btn-close上使用本地 CSS 变量进行实时定制。CSS 变量的值是从每个组件独有的 Sass map生成，并应用于上述类。

scss/按钮/_关闭.scss

// stylelint-disable-next-line scss/dollar-variable-default
$btn-close-tokens: defaults(
  (
    --btn-close-size: 1.25rem,
    --btn-close-color: inherit,
    --btn-close-icon: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M12 0a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zm-.646 4.646a.5.5 0 0 0-.707 0L8 7.293 5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.647a.5.5 0 1 0 .708.707L8 8.707l2.647 2.646a.5.5 0 1 0 .707-.707L8.707 8l2.646-2.646a.5.5 0 0 0 0-.708z'/></svg>"))},
    --btn-close-opacity: .5,
    --btn-close-hover-opacity: .75,
    --btn-close-focus-opacity: .85,
    --btn-close-disabled-opacity: .25,
  ),
  $btn-close-tokens
);