彩色链接

带悬停状态的彩色链接

此页面上

链接颜色

你可以使用 .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 中添加

彩色链接也可以通过我们的链接实用程序进行修改。