跳至主要内容 跳至文档导航

彩色链接(Colored links)

具有悬停状态的彩色链接

链接颜色

您可以使用.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

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

html
<p><a href="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Primary link</a></p>
<p><a href="#" class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Secondary link</a></p>
<p><a href="#" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Success link</a></p>
<p><a href="#" class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Danger link</a></p>
<p><a href="#" class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Warning link</a></p>
<p><a href="#" class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Info link</a></p>
<p><a href="#" class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Light link</a></p>
<p><a href="#" class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Dark link</a></p>
<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>