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

自定義焦點環

可以使用 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/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-* 的示例，以使焦點環模糊。

示例

您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

<!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-* 的示例。

示例

您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

<!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>
列印頁面
上一頁
下一頁
廣告