前端必知必会-Bootstrap 5 颜色

编程岁月

于 2024-10-03 09:00:00 发布

阅读量1.9k

点赞数 60

分类专栏：前端必知必会文章标签：前端 bootstrap html

本文链接：https://blog.csdn.net/qq_24018193/article/details/142614824

版权

前端必知必会专栏收录该内容

184 篇文章 2 订阅

订阅专栏

文章目录

Bootstrap 5 颜色
- 文本颜色
- 背景颜色
总结

Bootstrap 5 颜色

文本颜色

Bootstrap 5 有一些上下文类，可用于提供“通过颜色表达含义”。

文本颜色的类为：.text-muted、.text-primary、.text-success、.text-info、.text-warning、.text-danger、.text-secondary、.text-white、.text-dark、.text-body（默认正文颜色/通常为黑色）和 .text-light：

示例
此文本已静音。
此文本很重要。
此文本表示成功。
此文本代表一些信息。
此文本代表警告。
此文本代表危险。
次要文本。
深灰色文本。
正文。
浅灰色文本。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Contextual Colors</h2>
  <p>Use the contextual classes to provide "meaning through colors":</p>
  <p class="text-muted">This text is muted.</p>
  <p class="text-primary">This text is important.</p>
  <p class="text-success">This text indicates success.</p>
  <p class="text-info">This text represents some information.</p>
  <p class="text-warning">This text represents a warning.</p>
  <p class="text-danger">This text represents danger.</p>
  <p class="text-secondary">Secondary text.</p>
  <p class="text-dark">This text is dark grey.</p>
  <p class="text-body">Default body color (often black).</p>
  <p class="text-light">This text is light grey (on white background).</p>
  <p class="text-white">This text is white (on white background).</p>
</div>

</body>
</html>

您还可以使用 .text-black-50 或 .text-white-50 类为黑色或白色文本添加 50% 不透明度：

示例
白色背景上的黑色文本，不透明度为 50%
黑色背景上的白色文本，不透明度为 50%

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Opacity Text Colors</h2>
  <p>Add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:</p>
  <p class="text-black-50">Black text with 50% opacity on white background</p>
  <p class="text-white-50 bg-dark">White text with 50% opacity on black background</p>
</div>

</body>
</html>

背景颜色

背景颜色的类为：.bg-primary、.bg-success、.bg-info、.bg-warning、.bg-danger、.bg-secondary、.bg-dark 和 .bg-light。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Contextual Backgrounds</h2>
  <p>Use the contextual background classes to provide "meaning through colors".</p>
  <div class="bg-primary p-3"></div>
  <div class="bg-success p-3"></div>
  <div class="bg-info p-3"></div>
  <div class="bg-warning p-3"></div>
  <div class="bg-danger p-3"></div>
  <div class="bg-secondary p-3"></div>
  <div class="bg-dark p-3"></div>
  <div class="bg-light p-3"></div>
</div>

</body>
</html>

示例
上面的 .bg-color 类不适用于文本，或者至少您必须指定适当的 .text-color 类才能为每个背景获取正确的文本颜色。

但是，您可以使用 .text-bg-color 类，Bootstrap 将自动处理每个背景颜色的适当文本颜色：

示例
此文本很重要。
此文本表示成功。
此文本表示一些信息。
此文本表示警告。
此文本表示危险。
次要背景颜色。
深灰色背景颜色。
浅灰色背景颜色。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Background Color with Contrasting Text Color</h2>
  <p class="text-bg-primary">This text is important.</p>
  <p class="text-bg-success">This text indicates success.</p>
  <p class="text-bg-info">This text represents some information.</p>
  <p class="text-bg-warning">This text represents a warning.</p>
  <p class="text-bg-danger">This text represents danger.</p>
  <p class="text-bg-secondary">Secondary background color.</p>
  <p class="text-bg-dark">Dark grey background color.</p>
  <p class="text-bg-light">Light grey background color.</p>
</div>

</body>
</html>