彩色链接

带悬停状态的彩色链接

本页目录

链接颜色

你可以使用 .link-* 类来为链接着色。与 .text-* 类不同，这些类具有 :hover 和 :focus 状态。一些链接样式使用相对较浅的前景色，因此应仅在深色背景上使用，以确保有足够的对比度。

注意！ .link-body-emphasis 目前是唯一可以适应颜色模式的彩色链接。它被视为一个特殊情况，直到 v6 发布，我们才能更彻底地重建用于颜色模式的主题颜色。在此之前，它是一个独特的、高对比度的链接颜色，并具有自定义的 :hover 和 :focus 样式。不过，它仍然会响应新的链接工具类。

HTML

<p><a href="#" class="link-primary">Primary link</a></p>
<p><a href="#" class="link-secondary">Secondary link</a></p>
<p><a href="#" class="link-success">Success link</a></p>
<p><a href="#" class="link-danger">Danger link</a></p>
<p><a href="#" class="link-warning">Warning link</a></p>
<p><a href="#" class="link-info">Info link</a></p>
<p><a href="#" class="link-light">Light link</a></p>
<p><a href="#" class="link-dark">Dark link</a></p>
<p><a href="#" class="link-body-emphasis">Emphasis link</a></p>

无障碍提示：仅使用颜色来增加意义只提供视觉提示，这对于使用辅助技术（如屏幕阅读器）的用户是无法传达的。请确保意义本身在内容中就显而易见（例如，可见文本通过 足够的颜色对比）或者通过其他方式包含，例如使用 .visually-hidden 类隐藏的额外文本。

链接工具

在 v5.3.0 中添加

彩色链接也可以通过我们的链接工具进行修改。

主连接