引导程序 - 链接

本章讨论有助于自定义超链接的外观和Behave的链接实用程序类。

.link实用程序类使链接的样式和控制Behave变得更加容易和一致。

链接不透明度

可以使用.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之外， :hover变体还可用于.link-offset和.link-underline-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 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>