Bootstrap - 連結

上一頁
下一頁

本章討論了連結實用工具類，這些類有助於自定義超連結的外觀和行為。

.link 實用工具類使樣式化和控制連結的行為更加輕鬆和一致。

連結不透明度

可以使用.link-opacity-* 類更改連結的不透明度。

* 可以包含值，例如10、25、50、75、100。

注意：顏色的不透明度變化可能會導致顏色對比度不足。

讓我們來看一個.link-opacity-* 類的示例

示例

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Link</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 p-4">
          <h4>Link opacity</h4>
          <p><a class="link-opacity-10" href="#">Opacity of link 10</a></p>
          <p><a class="link-opacity-25" href="#">Opacity of link 25</a></p>
          <p><a class="link-opacity-50" href="#">Opacity of link 50</a></p>
          <p><a class="link-opacity-75" href="#">Opacity of link 75</a></p>
          <p><a class="link-opacity-100" href="#">Opacity of link 100</a></p>
        </div>
    </body>
</html>

也可以在懸停時更改不透明度級別。讓我們來看一個示例

示例

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Link</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 p-4">
          <h4>Link opacity - on hover</h4>
          <p><a class="link-opacity-10-hover" href="#">Opacity on hover 10</a></p>
          <p><a class="link-opacity-25-hover" href="#">Opacity on hover 25</a></p>
          <p><a class="link-opacity-50-hover" href="#">Opacity on hover 50</a></p>
          <p><a class="link-opacity-75-hover" href="#">Opacity on hover 75</a></p>
          <p><a class="link-opacity-100" href="#">No opacity change on hover</a></p>
        </div>
    </body>
</html>

連結下劃線

Bootstrap 提供了一組實用工具類來調整連結下劃線。

下劃線顏色

您可以使用.link-underline-* 類更改下劃線的顏色，而與連結文字顏色無關。

讓我們來看一個展示您可以用於連結下劃線的各種顏色的示例

示例

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Link</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 p-4">
          <h4>Link underline color</h4>
          <p><a class="link-underline-primary" href="#">Underline-Primary</a></p>
          <p><a class="link-underline-danger" href="#">Underline-Danger</a></p>
          <p><a class="link-underline-secondary" href="#">Underline-Secondary</a></p>
          <p><a class="link-underline-warning" href="#">Underline-Warning</a></p>
          <p><a class="link-underline-info" href="#">Underline-Info</a></p>
          <p><a class="link-underline-success" href="#">Underline-Success</a></p>
          <p><a class="link-underline-light" href="#">Underline-Light</a></p>
          <p><a class="link-underline-dark" href="#">Underline-Dark</a></p>
        </div>
    </body>
</html>

下劃線偏移量

下劃線偏移量指的是下劃線和文字之間的間隙或空間。您可以透過.link-offset-* 類調整文字和連結之間的空間。

偏移量會根據元素的當前字型大小自動調整。

讓我們來看一個.link-offset-* 類的示例

示例

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Link</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 p-4">
          <h4>Link underline offset</h4>
          <p><a class="link-offset-1" href="#">Link offset - 1</a></p>
          <p><a class="link-offset-2" href="#">Link offset - 2</a></p>
          <p><a class="link-offset-3" href="#">Link offset - 3</a></p>
          <p><a href="#">No offset</a></p>
        </div>
    </body>
</html>

下劃線不透明度

您也可以更改下劃線的不透明度。

  • 使用.link-underline-opacity-* 類來實現此功能。

  • 在使用.link-underline-opacity-* 類之前，您需要新增.link-underline 類。

讓我們來看一個示例

示例

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Link</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 p-4">
          <h4>Link underline opacity</h4>
          <p><a class="link-offset-3 link-underline link-underline-opacity-0" href="#">Opacity of underline 0</a></p>
          <p><a class="link-offset-3 link-underline link-underline-opacity-10" href="#">Opacity of underline 10</a></p>
          <p><a class="link-offset-3 link-underline link-underline-opacity-25" href="#">Opacity of underline 25</a></p>
          <p><a class="link-offset-3 link-underline link-underline-opacity-50" href="#">Opacity of underline 50</a></p>
          <p><a class="link-offset-3 link-underline link-underline-opacity-75" href="#">Opacity of underline 75</a></p>
          <p><a class="link-offset-3 link-underline link-underline-opacity-100" href="#">Opacity of underline 100</a></p>
        </div>
    </body>
</html>

懸停變體

除了.link-opacity-*-hover 之外，.link-offset 和.link-underline-opacity 也提供了:hover 變體。

您可以根據需要組合使用所有這些實用工具類。

讓我們來看一個示例

示例

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Link</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 p-4">
          <h4>Link hover variants</h4>
          <p><a href="#" class="link-offset-3-hover">link-offset-3-hover</a></p>  
          <p><a href="#" class="link-offset-3-hover link-underline link-underline-opacity-75-hover">link-underline link-underline-opacity-75-hover</a></p>
      </div>
    </body>
</html>

彩色連結

.link 實用工具類可以與彩色連結輔助類 配合使用。

您可以使用這些新的實用工具類來調整連結顏色、不透明度、下劃線不透明度和下劃線偏移量。

讓我們來看一個示例

示例

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Link</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 p-4">
          <h4>Link utilities with colored links</h4>
          <p><a href="#" class="link-primary link-offset-3 link-underline-opacity-75 link-underline-opacity-100-hover">Primary colored link</a></p>
          <p><a href="#" class="link-secondary link-offset-3 link-underline-opacity-75 link-underline-opacity-100-hover">Secondary colored link</a></p>
          <p><a href="#" class="link-success link-offset-3 link-underline-opacity-50 link-underline-opacity-100-hover">Success colored link</a></p>
          <p><a href="#" class="link-danger link-offset-3 link-underline-opacity-50 link-underline-opacity-100-hover">Danger colored link</a></p>
          <p><a href="#" class="link-warning link-offset-3 link-underline-opacity-25 link-underline-opacity-100-hover">Warning colored link</a></p>
          <p><a href="#" class="link-info link-offset-3 link-underline-opacity-25 link-underline-opacity-100-hover">Info colored link</a></p>
          <p><a href="#" class="link-light link-offset-3 link-underline-opacity-100 link-underline-opacity-100-hover">Light colored link</a></p>
          <p><a href="#" class="link-dark link-offset-3 link-underline-opacity-100 link-underline-opacity-100-hover">Dark colored link</a></p>
          <p><a href="#" class="link-body-emphasis link-offset-3 link-underline-opacity-75 link-underline-opacity-75-hover">Emphasis colored link</a></p>
      </div>
    </body>
</html>
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.