笙亿网络策划

Bootstrap 焦点环怎么用？如何自定义 Focus Ring 样式？

约 12 分钟读完 2 阅
文章导读
上一个 测验 下一个 本章讨论如何为各种元素和组件添加和修改自定义焦点环样式。
📋 目录
  1. 壹 自定义 focus ring
  2. 贰 工具类
A A

Bootstrap - 焦点环

上一个
测验
下一个

本章讨论如何为各种元素和组件添加和修改自定义焦点环样式。

在 Bootstrap 5 中，焦点环是一种视觉指示器，当元素获得焦点时会在其周围显示。焦点环是一个围绕元素的圆形轮廓，通常使用对比色，以指示该元素当前处于活动状态并准备接收用户的输入。

Bootstrap 5 为交互式元素（如按钮、链接和表单控件）默认提供了内置的焦点环。

默认的 outline 在 :focus 状态下被辅助类 .focus-ring 移除，并替换为 box-shadow。

让我们看一个展示 .focus-ring 用法的示例：

示例

您可以使用 Edit & Run 选项编辑并运行此代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Helper</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
       <div class="container-fluid flex-grow-1">
        <h4>Focus ring</h4>   
        <a href="#" class="d-inline-flex focus-ring py-1 px-2 text-bg-light border rounded-2">
          Example focus ring
        </a>
        <button class="button focus-ring py-1 px-2 text-bg-light border rounded-2">Click Me</button>
        </div>
    </body>
</html>

自定义 focus ring

可以使用 CSS variables、Sass variables、utilities 或自定义样式来自定义 focus ring。

CSS variables

为了更改 focus ring 的默认外观，请修改 CSS variables --bs-focus-ring-*

让我们看一个自定义 CSS variables --bs-focus-ring-* 的示例：

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Helper</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
       <div class="container-fluid flex-grow-1"> 
        <h4>Focus ring - Customize CSS variable</h4>   
        <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-danger-rgb), .25)">
          Red focus ring
        </a>
       <div> 
    </body>
</html>

让我们看一个自定义 CSS variables --bs-focus-ring-* 的示例，使 focus ring 变得模糊：

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Helper</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container-fluid flex-grow-1"> 
        <h4>Focus ring - Customize CSS variable</h4>  
        <a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--bs-focus-ring-x: 20px; --bs-focus-ring-y: 20px; --bs-focus-ring-blur: 6px">
          Blur focus ring
        </a>
      </div> 
    </body>
</html>

工具类

Bootstrap 提供了几个工具类 .focus-ring-* 来修改默认设置。

例如，使用任何主题颜色来修改 focus ring 的颜色。

让我们看一个自定义工具类 .focus-ring-* 的示例：

示例

您可以使用 Edit & Run 选项来编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Helper</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
       <div class="container-fluid flex-grow-1"> 
        <h4>Focus ring - Customize utilities</h4>
        <p><a href="#" class="d-inline-flex focus-ring focus-ring-success py-1 px-2">Success focus ring</a></p>
        <p><a href="#" class="d-inline-flex focus-ring focus-ring-info py-1 px-2">Info focus ring</a></p>
        <p><a href="#" class="d-inline-flex focus-ring focus-ring-warning py-1 px-2">Warning focus ring</a></p>
        <p><a href="#" class="d-inline-flex focus-ring focus-ring-danger py-1 px-2">Danger focus ring</a></p>
        <p><a href="#" class="d-inline-flex focus-ring focus-ring-secondary py-1 px-2">Secondary focus ring</a></p>
        <p><a href="#" class="d-inline-flex focus-ring focus-ring-primary py-1 px-2">Primary focus ring</a></p>
        <p><a href="#" class="d-inline-flex focus-ring focus-ring-dark py-1 px-2">Dark focus ring</a></p>
        <p><a href="#" class="d-inline-flex focus-ring focus-ring-light py-1 px-2">Light focus ring</a></p>
      </div>
    </body>
</html>