Colored links

带有悬停状态的彩色链接

On this page

链接颜色

您可以使用.link-*类为链接着色。与.text-*classes不同，这些类具有 :hover 和 :focus 状态。一些链接样式使用相对较浅的前景色，并且应该仅在较暗的背景上使用，以便具有足够的对比度。

Heads up! .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类隐藏的其他文本。

Link工具集

Added in v5.3.0

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