Bootstrap 简明教程

Bootstrap - Colored links

本章讨论了帮助程序类中的彩色链接功能。Bootstrap 5 彩色链接用于向链接元素添加颜色。

为了使链接变为彩色，使用 .link- * 类。这些类具有 :hover 和 :focus 状态，不同于 .text-* classes 。

为了使链接可读，具有相对较浅的前景色，在深色背景下使用它们。

Example

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

<!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 提供了一系列的链接实用程序，如链接不透明度、链接偏移、下划线颜色、下划线不透明度等。

同样，也可以使用链接实用工具来修改彩色链接。让我们看一个示例：

Example

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

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