带颜色链接（Colored links）

带悬停状态的彩色链接

On this page

链接颜色

您可以使用 .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类隐藏的附加文本）明显看出含义。

链接实用程序

Added in v5.3.0

彩色链接也可以通过我们的链接实用程序.