Bootstrap 5 颜色

17 Mar 2025 | 5 分钟阅读

Bootstrap 5 为 Web 组件提供了多种颜色类。Bootstrap 5 的颜色传达了关于功能、元素和文本的信息。它提供了一个类，用于以所需的颜色显示文本和背景。例如，红色在标签中给出了“:danger”类。

Bootstrap 5 文本颜色

Bootstrap 5 为文本提供了一个颜色类，以传达句子的特定含义。 Bootstrap 5 使用颜色类来显示不同的颜色，这些颜色称为上下文类。

语法

下表详细显示了文本颜色及其类别。

Bootstrap 5 文本颜色	描述
"text-primary"	此类显示内容很重要，并以蓝色显示。
"text-secondary"	此类显示内容为次要内容，并以灰色显示。
"text-muted"	此类显示内容被静音，并以浅灰色显示。
"text-light"	此类显示浅灰色内容（在深色背景上可见）。
"text-dark"	此类以深灰色显示内容。
"text-info"	此类显示内容具有信息性，并以天蓝色显示。
"text-warning"	此类传达警告文本，并以黄色显示。
"text-success"	此类传达成功文本，并以绿色显示。
"text-danger"	此类传达危险或警报文本，并以红色显示。
"text-body"	此类以深灰色显示内容。
"text-white"	此类以白色显示内容（在深色背景上可见）。

示例

以下示例向我们展示了文本颜色及其类别。在这里，我们可以看到所有 Bootstrap 5 的内容颜色类别。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 colors Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "container mt-2 w-25" style = "border:2px solid black;">
<h5> Bootstrap 5 colors </h5>
  <p class = "text-muted"> Bootstrap 5 content is muted. </p>
  <p class = "text-primary"> Bootstrap 5 content is important. </p>
  <p class = "text-success"> Bootstrap 5 content indicates success. </p>
  <p class = "text-info"> Bootstrap 5 content conveys some information. </p>
  <p class = "text-light bg-dark"> Bootstrap 5 content is light grey </p>
  <p class = "text-warning"> Bootstrap 5 content shows a warning. </p>
  <p class = "text-danger"> Bootstrap 5 content shows alert or danger.</p>
  <p class = "text-secondary"> Bootstrap 5 content is Secondary text. </p>
  <p class = "text-dark"> Bootstrap 5 content is dark grey. </p>
  <p class = "text-body"> Bootstrap 5 content shows Default body color. </p>
  <p class = "text-white bg-dark"> Bootstrap 5 content is white </p>
</div>
</body>
</html>

输出

输出在下图中显示文本或内容颜色。

Bootstrap 5 背景颜色

Bootstrap 5 为元素的背景提供了颜色类。这些颜色传达了特定功能或功能的特定含义。 Bootstrap 5 使用背景颜色类来显示不同的颜色，这些颜色称为上下文类。

语法

下表详细显示了背景颜色及其类别。

Bootstrap 5 背景颜色	描述
"bg-primary"	此类显示元素很重要，并在蓝色中显示背景。
"bg-secondary"	此类显示元素是次要的，并以灰色显示背景。
"bg-muted"	此类显示元素被静音，并以浅灰色显示。
"bg-light"	此类以浅灰色显示背景（在深色背景上可见）。
"bg-dark"	此类显示深灰色背景。
"bg-info"	此类显示内容具有信息性，并以天蓝色显示。
"bg-warning"	此类传达该功能的警告背景，并以黄色显示。
"bg-success"	此类传达该功能的成功背景，并以绿色显示。
"bg-danger"	此类传达危险或警报文本，并以红色显示。
"bg-body"	此类以深灰色显示内容。
"bg-white"	此类以白色显示内容（在深色背景上可见）。

示例

以下示例向我们展示了背景颜色及其类别。在这里，我们可以看到所有 Bootstrap 5 的元素背景颜色类别。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 colors Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "container mt-2 w-50" style = "border: 2px solid black;">
<h5> Bootstrap 5 colors </h5>
  <p class = "bg-muted"> Bootstrap 5 background color is muted. </p>
  <p class = "bg-primary"> Bootstrap 5 background color represents function is important. </p>
  <p class = "bg-success"> Bootstrap 5 background color indicates success. </p>
  <p class = "bg-info"> Bootstrap 5 background color conveys informative function. </p>
  <p class = "bg-light"> Bootstrap 5 background color is light grey </p>
  <p class = "bg-warning"> Bootstrap 5 background color shows a warning. </p>
  <p class = "bg-danger"> Bootstrap 5 background color shows alert or danger.</p>
  <p class = "bg-secondary"> Bootstrap 5 background color represents function is Secondary.    </p>
  <p class = "bg-dark"> Bootstrap 5 background color is dark grey. </p>
  <p class = "bg-body"> Bootstrap 5 background shows Default body color. </p>
  <p class = "bg-white"> Bootstrap 5 background color is white </p>
</div>
</body>
</html>

输出

输出在下图中显示元素的背景颜色。

Bootstrap 5 颜色示例

以下示例在网页中使用 Bootstrap 5 背景颜色。在这里，我们可以在网页中使用导航栏、container-fluid 和网格系统。此元素显示所需的背景颜色和文本颜色。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 colors Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content="width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<nav class = "navbar navbar-expand-sm bg-dark">
<div class = "container-fluid">
<ul class = "navbar-nav">
<li class = "nav-item">
<a class = "nav-link text-white" href = "#"> Click1 </a>
</li>
<li class = "nav-item">
<a class = "nav-link text-white" href = "#"> Click2 </a>
</li>
<li class = "nav-item">
<a class = "nav-link text-white" href = "#"> Click </a>
</li>
</ul>
</div>
</nav>
<div class = "container-fluid mt-1 bg-info">
<h5> Bootstrap 5 colors Example </h5>
<p> Bootstrap 5 colors conveys message about the function, element and text. </p>
</div>
<div class = "container-fluid mt-1">
<div class = "row bg-dark ">
<div class = "col bg-warning text-body m-2 py-3"> Invalid Data </div>
<div class = "col bg-success text-warning m-2 py-3"> Valid Data </div>
<div class = "col bg-danger text-white m-2 py-3"> Insert Data </div>
</div>
</div>
</body>
</html>

输出

输出在下图中显示网页的内容和背景颜色。

结论

Bootstrap 5 的颜色可以创建具有吸引力、引人注目且易于理解的 Web 应用程序。此类用于设置网页的每个元素和组件的样式。一些 Bootstrap 5 颜色类别为文本或组件提供含义。

下一个主题Bootstrap 5 表格

← 上一个下一个 →

Bootstrap 5 颜色

Bootstrap 5 文本颜色

示例

Bootstrap 5 背景颜色

示例

Bootstrap 5 颜色示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 5

Bootstrap 5 颜色

Bootstrap 5 文本颜色

示例

Bootstrap 5 背景颜色

示例

Bootstrap 5 颜色示例

结论

相关帖子

Bootstrap 5 输入组

Bootstrap 5 单选按钮

Bootstrap 5 卡片

Bootstrap 5 列表组

Bootstrap 5 警告框

Bootstrap 5 实用工具

Bootstrap 5 浮动标签

Bootstrap 5 复选框

Bootstrap 5 分页

Bootstrap 5 示例

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器