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 变量、实用程序或自定义样式来进行自定义。
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>