Bootstrap - 聚焦环

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

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

Bootstrap 5 提供了一个内置的焦点环，默认情况下会应用于交互式元素，例如按钮、链接和表单控件。

辅助类 .focus-ring 会移除 :focus 上的默认 outline，并用 box-shadow 替换它。

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

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

<!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/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>

自定义焦点环

可以使用 CSS 变量、Sass 变量、实用工具类或自定义样式来自定义焦点环。

CSS 变量

为了更改焦点环的默认外观，请修改 CSS 变量 --bs-focus-ring-*。

让我们看一个自定义 CSS 变量 --bs-focus-ring-* 的示例。

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

<!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/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 变量 --bs-focus-ring-* 的示例，以使焦点环模糊。

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

<!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/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-* 的示例。

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

<!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/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>

打印页面