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 類別隱藏的附加文字。

連結工具程式

在 v5.3.0 中新增

彩色連結也可以透過我們的連結工具程式來修改。