Bootstrap - 顏色和背景

本章討論如何設定背景顏色以及相應的對比前景或文字顏色。

這些顏色和背景輔助類將.text-* 實用程式和.bg-* 實用程式組合在一個通用類中，即.text-bg-*。

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

示例

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Helper</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>
        <h4>Color and background utilities</h4>  
        <br> 
        <div class="text-bg-primary p-3">Primary background with contrasting text color</div>
        <div class="text-bg-secondary p-3">Secondary background with contrasting text color</div>
        <div class="text-bg-success p-3">Success background with contrasting text color</div>
        <div class="text-bg-danger p-3">Danger background with contrasting text color</div>
        <div class="text-bg-warning p-3">Warning background with contrasting text color</div>
        <div class="text-bg-info p-3">Info background with contrasting text color</div>
        <div class="text-bg-light p-3">Light background with contrasting text color</div>
        <div class="text-bg-dark p-3">Dark background with contrasting text color</div>
    </body>
</html>

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

使用其他方法，例如.visually-hidden 類，來增加內容的清晰度。

與元件一起使用

顏色和背景輔助類可以代替組合的.text-*和.bg-*類，例如在徽章上。

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

示例

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Helper</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>
        <h4>Color and background utilities - badges</h4>  
        <br> 
        <span class="badge text-bg-success">Success</span>
        <span class="badge text-bg-info">Info</span>
        <span class="badge text-bg-warning">Warning</span>
    </body>
</html>

顏色和背景輔助類可以代替組合的.text-*和.bg-*類，例如在卡片上。

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

示例

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Helper</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>
        <h4>Color and background utilities - cards</h4>  
        <br> 
        <div class="card text-bg-info mb-3" style="max-width: 18rem;">
          <div class="card-header fw-bold">Card Header</div>
          <div class="card-body">
            <p class="card-text">Card showing the text and background color classes used together.</p>
          </div>
        </div>
        <div class="card text-bg-warning mb-3" style="max-width: 18rem;">
          <div class="card-header fw-bold">Card Header</div>
          <div class="card-body">
            <p class="card-text">Card showing the text and background color classes used together.</p>s
          </div>
        </div>
    </body>
</html>

列印頁面