Bootstrap - 彩色链接

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

为了使链接着色，请使用.link-*类。与.text-* 类不同，这些类具有:hover和:focus状态。


为了使前景色相对较浅的链接清晰可见，请在深色背景上使用它们。

.link-body-emphasis是唯一具有独特且高对比度链接颜色的彩色链接。它带有:hover和:focus样式。

例子

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

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

辅助功能提示：颜色的使用仅提供视觉指示，这对屏幕阅读器等辅助技术的用户没有帮助。确保内容本身的含义是明确的。

使用替代方法使用.visually-hidden 类来增加内容的清晰度。

链接实用程序

Bootstrap 提供了一系列链接实用程序，例如链接不透明度、链接偏移、下划线颜色、下划线不透明度等。

类似颜色的链接也可以使用链接实用程序进行修改。让我们看一个例子：

例子

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

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