Bootstrap 简明教程
Bootstrap - Colored links
本章讨论了帮助程序类中的彩色链接功能。Bootstrap 5 彩色链接用于向链接元素添加颜色。
This chapter discusses about the colored link feature of helper classes. The Bootstrap 5 colored links are used to add colors to the link elements.
为了使链接变为彩色，使用 .link- * 类。这些类具有 :hover 和 :focus 状态，不同于 .text-* classes 。
In order to make the links colored, use .link-* classes. These classes have :hover and :focus states, unlike the .text-* classes.
为了使链接可读，具有相对较浅的前景色，在深色背景下使用它们。
In order to make the links legible, that have relatively light foreground color, use them on a dark background.
Example
可以使用 编辑和运行 选项编辑并尝试运行此代码。
You can edit and try running this code using the *Edit & Run * option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Helper - Colored 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-2">
<h4>Colored links</h4><br>
<p><a href="#" class="link-primary">Primary Color Link</a></p>
<p><a href="#" class="link-secondary">Secondary Color Link</a></p>
<p><a href="#" class="link-info">Info Color Link</a></p>
<p><a href="#" class="link-success">Success Color Link</a></p>
<p><a href="#" class="link-light bg-dark">Light Color Link on dark background</a></p>
<p><a href="#" class="link-dark">Dark Color Link</a></p>
<p><a href="#" class="link-warning">Warning Color Link</a></p>
<p><a href="#" class="link-danger">Danger Color Link</a></p>
<p><a href="#" class="link-body-emphasis">Custom Emphasis Link</a></p>
</div>
</body>
</html>Link utilities
Bootstrap 提供了一系列的链接实用程序，如链接不透明度、链接偏移、下划线颜色、下划线不透明度等。
Bootstrap provides a range of link utilities such as link opacity, link offset, underline color, underline opacity, and so on.
同样，也可以使用链接实用工具来修改彩色链接。让我们看一个示例：
Similarly colored links can also be modified using the link utilities. 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 - Helper - Colored 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-2">
<h4>Colored link utilities</h4><br>
<p><a href="#" class="link-offset-1 link-primary link-opacity-50 link-underline-warning link-underline-opacity-75">Primary Color Link</a></p>
<p><a href="#" class="link-offset-1 link-secondary link-opacity-50 link-underline-danger link-underline-opacity-50">Secondary Color Link</a></p>
<p><a href="#" class="link-offset-2 link-info link-opacity-25 link-underline-success link-underline-opacity-100">Info Color Link</a></p>
<p><a href="#" class="link-offset-2 link-success link-opacity-75 link-underline-danger link-underline-opacity-70">Success Color Link</a></p>
</div>
</body>
</html>