Bootstrap - 彩色連結

本章討論輔助類中的彩色連結功能。Bootstrap 5 彩色連結用於為連結元素新增顏色。

為了使連結變為彩色，請使用.link-* 類。與.text-* 類不同，這些類具有:hover 和:focus 狀態。

為了使具有相對較淺的前景色連結易於閱讀，請在深色背景上使用它們。

.link-body-emphasis 是唯一一個獨特的、高對比度彩色連結。它帶有:hover 和:focus 樣式。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Helper - Colored link</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="container p-2">
            <h4>Colored links</h4><br>
            <p><a href="#" class="link-primary">Primary Color Link</a></p>
            <p><a href="#" class="link-secondary">Secondary Color Link</a></p>
            <p><a href="#" class="link-info">Info Color Link</a></p>
            <p><a href="#" class="link-success">Success Color Link</a></p>
            <p><a href="#" class="link-light bg-dark">Light Color Link on dark background</a></p>
            <p><a href="#" class="link-dark">Dark Color Link</a></p>
            <p><a href="#" class="link-warning">Warning Color Link</a></p>
            <p><a href="#" class="link-danger">Danger Color Link</a></p>
            <p><a href="#" class="link-body-emphasis">Custom Emphasis Link</a></p>
        </div>
    </body>
</html>

輔助功能提示：顏色的使用僅提供視覺指示，這對螢幕閱讀器等輔助技術的使用者沒有幫助。確保內容本身清晰地表達了含義。

使用替代方法，使用.visually-hidden 類來增加內容的清晰度。

連結實用工具

Bootstrap 提供一系列連結實用工具，例如連結不透明度、連結偏移量、下劃線顏色、下劃線不透明度等等。

同樣，也可以使用連結實用工具修改彩色連結。讓我們來看一個例子

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Helper - Colored link</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
       <div class="container p-2">
        <h4>Colored link utilities</h4><br>
        <p><a href="#" class="link-offset-1 link-primary link-opacity-50 link-underline-warning link-underline-opacity-75">Primary Color Link</a></p>
        <p><a href="#" class="link-offset-1 link-secondary link-opacity-50 link-underline-danger link-underline-opacity-50">Secondary Color Link</a></p>
        <p><a href="#" class="link-offset-2 link-info link-opacity-25 link-underline-success link-underline-opacity-100">Info Color Link</a></p>
        <p><a href="#" class="link-offset-2 link-success link-opacity-75 link-underline-danger link-underline-opacity-70">Success Color Link</a></p>
       </div>
    </body>
</html>

列印頁面