跳至主要內容 跳至文件導覽

連結顏色(Colored links)

具有 hover 狀態的彩色連結

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