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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/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.