Bootstrap 简明教程
Bootstrap - Color and background
本章讨论了用恰当的对比前景或文本颜色设置背景颜色的问题。
This chapter discusses about setting the background color with appropriate contrasting foreground or text color.
这些颜色和背景帮助类在 .text- 实用程序*和 .bg- 实用程序*中组合了同一个常规类，即 .text-bg- *。
These color and background helper classes combine the .text- utilities* and .bg- utilities* in one common class, namely .text-bg-*.
为了使链接具有可读性，链接具有相对较浅的前景色，请使用深色背景。
In order to make the links legible, that have relatively light foreground color, use on a dark background.
Example
可以使用 编辑和运行 选项编辑并尝试运行此代码。
You can edit and try running this code using the *Edit & Run * option.
<!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>With components
颜色和背景辅助类可用于代替组合的 .text- 和 .bg- 类，例如在 badges 上。
The color and background helper classes can be used in place of combined .text- and .bg- classes, such as on badges.
为了使链接具有可读性，链接具有相对较浅的前景色，请使用深色背景。
In order to make the links legible, that have relatively light foreground color, use on a dark background.
Example
可以使用 编辑和运行 选项编辑并尝试运行此代码。
You can edit and try running this code using the *Edit & Run * option.
<!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- 类，例如在 cards 上。
The color and background helper classes can be used in place of combined .text- and .bg- classes, such as on cards.
为了使链接具有可读性，链接具有相对较浅的前景色，请使用深色背景。
In order to make the links legible, that have relatively light foreground color, use on a dark background.
Example
可以使用 编辑和运行 选项编辑并尝试运行此代码。
You can edit and try running this code using the *Edit & Run * option.
<!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>