v5.3 中新增 在 GitHub 上查看
焦点环
实用程序类,可让你向元素和组件添加和修改自定义焦点环样式。
此页面上的内容
.focus-ring
帮助程序移除 :focus
上的默认 outline
,用可更广泛自定义的 box-shadow
取代它。新阴影由一系列 CSS 变量组成,这些变量从 :root
级别继承,可针对任何元素或组件进行修改。
示例
直接点击下面的链接以查看焦点环的实际效果,或进入下面的示例,然后按 Tab。
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2">
Custom focus ring
</a>
自定义
使用我们的 CSS 变量、Sass 变量、实用程序或自定义样式修改焦点环的样式。
CSS 变量
根据需要修改 --bs-focus-ring-*
CSS 变量以更改默认外观。
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--bs-focus-ring-color: rgba(var(--bs-success-rgb), .25)">
Green focus ring
</a>
.focus-ring
通过可在任何父元素上覆盖的全局 CSS 变量设置样式,如上所示。这些变量由其 Sass 变量对应项生成。
--#{$prefix}focus-ring-width: #{$focus-ring-width};
--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
--#{$prefix}focus-ring-color: #{$focus-ring-color};
默认情况下,没有 --bs-focus-ring-x
、--bs-focus-ring-y
或 --bs-focus-ring-blur
,但我们提供了 CSS 变量,其回退值为初始 0
值。修改它们以更改默认外观。
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--bs-focus-ring-x: 10px; --bs-focus-ring-y: 10px; --bs-focus-ring-blur: 4px">
Blurry offset focus ring
</a>
Sass 变量
自定义焦点环 Sass 变量以修改 Bootstrap 支持的项目中焦点环样式的所有用法。
$focus-ring-width: .25rem;
$focus-ring-opacity: .25;
$focus-ring-color: rgba($primary, $focus-ring-opacity);
$focus-ring-blur: 0;
$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color;
Sass 实用程序 API
除 .focus-ring
外,我们还有多个 .focus-ring-*
实用程序来修改辅助类默认值。使用我们的任何 主题颜色修改颜色。请注意,鉴于当前的颜色模式支持,浅色和深色变体可能在所有背景颜色上不可见。
<p><a href="#" class="d-inline-flex focus-ring focus-ring-primary py-1 px-2 text-decoration-none border rounded-2">Primary focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-secondary py-1 px-2 text-decoration-none border rounded-2">Secondary focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-success py-1 px-2 text-decoration-none border rounded-2">Success focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-danger py-1 px-2 text-decoration-none border rounded-2">Danger focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-warning py-1 px-2 text-decoration-none border rounded-2">Warning focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-info py-1 px-2 text-decoration-none border rounded-2">Info focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-light py-1 px-2 text-decoration-none border rounded-2">Light focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-dark py-1 px-2 text-decoration-none border rounded-2">Dark focus</a></p>
焦点环实用程序在 scss/_utilities.scss
中的实用程序 API 中声明。 了解如何使用实用程序 API。
"focus-ring": (
css-var: true,
css-variable-name: focus-ring-color,
class: focus-ring,
values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
),