Bootstrap 简明教程

Bootstrap - Focus ring

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

在 Bootstrap 5 中,焦点环是一种可视指示器,当元素获得焦点时,会在其周围显示。焦点环是一个围绕元素出现的圆形轮廓(通常为对比色)从而表示当前激活该元素,并准备接收用户输入。

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

outline 的默认 :focus 被帮助器类 .focus-ring 删除,因此将其替换为 box-shadow

我们来看一个展示 .focus-ring 使用情况的示例:

Example

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

<!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>

Customize focus ring

焦点环可以通过修改 CSS 变量、Sass 变量、实用程序或自定义样式来进行自定义。

CSS variables

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

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

Example

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

<!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 变量 --bs-focus-ring- * 的示例,以便使焦点环模糊:

Example

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

<!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>

Utilities

Bootstrap 提供多种实用程序 .focus-ring- * 来修改默认设置。

例如,使用任意主题颜色修改焦点环颜色。

我们来看一个自定义实用程序 .focus-ring- * 的示例:

Example

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

<!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>