代码如下：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>CN_TEST1</title>
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-
- <!-- bootstrap css核心文件-->
- <link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
- <!-- bootstrap使用到了jquery，需要提前引用-->
- <script src="js/jquery-3.5.1.min.js"></script>
- <!-- 弹窗、提示、下拉菜单-->
- <script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
- <!-- bootstrap核心文件-->
- <script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
-
- </head>
- <body>
- <div class="container-fluid" style="background: orangered">
- <h1>文本颜色</h1>
- <p class="text-muted">柔和文本</p>
- <p class="text-primary">主要文本</p>
- <p class="text-success">成功文本</p>
- <p class="text-info">信息文本</p>
- <p class="text-warning">警告文本</p>
- <p class="text-danger">危险文本</p>
- <p class="text-secondary">次要文本</p>
- <p class="text-dark">暗色文本</p>
- <p class="text-light">浅色文本</p>
- <p class="text-white">白色文本</p>
-
- <h1>链接颜色</h1>
- <a class="text-muted">柔和文本</a>
- <a class="text-primary">主要文本</a>
- <a class="text-success">成功文本</a>
- <a class="text-info">信息文本</a>
- <a class="text-warning">警告文本</a>
- <a class="text-danger">危险文本</a>
- <a class="text-secondary">次要文本</a>
- <a class="text-dark">暗色文本</a>
- <a class="text-light">浅色文本</a>
- <a class="text-white">白色文本</a>
-
- <h1>背景颜色</h1>
- <p class="bg-primary text-white">重要的背景颜色</p>
- <p class="bg-success text-white">执行成功的背景颜色</p>
- <p class="bg-info text-white">信息提示背景颜色</p>
- <p class="bg-warning text-white">警告背景颜色</p>
- <p class="bg-danger text-white">危险背景颜色</p>
- <p class="bg-secondary text-white">副标题背景颜色</p>
- <p class="bg-dark text-white">暗色背景颜色</p>
- <p class="bg-light text-dark">浅色背景颜色</p>
- </div>
- </body>
- </html>
程序运行截图如下：
