Bootstrap 简明教程

Bootstrap - Link

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

This chapter discusses about the link utility classes that help in customizing the appearance and behavior of hyperlinks.

.link 实用程序类使样式设计和控制链接行为变得更加轻松和一致。

The .link utility classes make it more easier and consistent to style and control the behavior of links.

Link opacity

可以使用 .link-opacity- * 类更改链接的不透明度。

Opacity of the links can be changed using the .link-opacity-* class.

可以保存 10, 25, 50, 75, 100 等值。

The * can hold values like 10, 25, 50, 75, 100.

Note: 颜色不透明度的变化可能导致颜色对比度不足。

Note: The change in the color’s opacity may lead to insufficient color contrast.

让我们看一个 .link-opacity- * 类的示例：

Let us see an example of the .link-opacity-* class:

Example

可以使用 编辑和运行 选项编辑并尝试运行此代码。

You can edit and try running this code using the *Edit & Run * option.

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

可以在 hover 上更改不透明度级别。让我们看一个示例：

Opacity level can also be changed on hover. Let us see an example:

Example

可以使用 编辑和运行 选项编辑并尝试运行此代码。

You can edit and try running this code using the *Edit & Run * option.

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

Link underlines

Bootstrap 提供了一组实用工具类来调整链接下划线。

A set of utility classes are provided by Bootstrap to adjust the link underlines.

Underline color

可以使用 .link-underline- * 类更改下划线颜色，而与链接文本颜色无关。

You can change the underline’s color, independent of the link text color, using the .link-underline-* class.

让我们看一个示例，展示您可以用于链接下划线的各种颜色：

Let us see an example showcasing all the various colors you can use for the underline of a link:

Example

可以使用 编辑和运行 选项编辑并尝试运行此代码。

You can edit and try running this code using the *Edit & Run * option.

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

Underline offset

下划线偏移指的是下划线和文本之间的间隔或空间。通过 .link-offset- <em> 类，你可以调整文本与链接之间的空格。

The underline offset refers to the gap or space between the underline and the text. Through the .link-offset-* class, you can adjust the space between the text and the link.

偏移会自动根据元素当前的字体大小进行调整。

Offset automatically adjusts with the element’s current font-size.

让我们来看一个 .link-offset- </em> 类的示例：

Let us see an example of .link-offset-* class:

Example

可以使用 编辑和运行 选项编辑并尝试运行此代码。

You can edit and try running this code using the *Edit & Run * option.

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

Underline opacity

你也可以更改下划线的透明度。

You can change the underline’s opacity too.

Use the .link-underline-opacity-* class to achieve this feature.
You need to add .link-underline class, before using the .link-underline-opacity-* class.

我们看一个示例：

Let us see an example:

Example

可以使用 编辑和运行 选项编辑并尝试运行此代码。

You can edit and try running this code using the *Edit & Run * option.

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

Hover variants

除了 .link-opacity- -hover*， :hover 变体也可用于 .link-offset 和 .link-underline-opacity 。

:hover variants are available for .link-offset and .link-underline-opacity, apart from .link-opacity--hover*.

你可以根据需要将所有这些实用程序类组合使用。

You can use all these utility classes in combinations, as per your requirement.

我们看一个示例：

Let us see an example:

Example

可以使用 编辑和运行 选项编辑并尝试运行此代码。

You can edit and try running this code using the *Edit & Run * option.

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

Colored links

.link 实用程序类可以与 colored link helpers 配对。

The .link utility classes can be paired with the colored link helpers.

你可以使用这些新的实用程序类来调整链接颜色、透明度、下划线透明度和下划线偏移。

You can use these new utility classes to adjust the link color, opacity, underline opacity and underline offset.

我们看一个示例：

Let us see an example:

Example

可以使用 编辑和运行 选项编辑并尝试运行此代码。

You can edit and try running this code using the *Edit & Run * option.

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