|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
|
<title>颜色与背景</title>
|
|
|
|
|
|
<base href="/" />
|
|
|
|
|
|
<link rel="icon" type="image/png" href="favicon.png" />
|
|
|
|
|
|
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
|
|
|
|
|
|
<link rel="stylesheet" href="css/app.css" />
|
|
|
|
|
|
<script src="/plugs/holder/holder.min.js"></script>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="card mt-3">
|
|
|
|
|
|
<div class="card-header .bg-dark-subtle">
|
|
|
|
|
|
颜色与背景：设置具有对比前景色的背景色
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
|
<div class="text-bg-primary p-3">Primary 具有对比色的主色 .text-bg-primary</div>
|
|
|
|
|
|
<div class="text-bg-secondary p-3">具有对比色的次色 .text-bg-secondary</div>
|
|
|
|
|
|
<div class="text-bg-success p-3">具有对比色的成功色 .text-bg-success</div>
|
|
|
|
|
|
<div class="text-bg-danger p-3">具有对比色的危险色 .text-bg-danger</div>
|
|
|
|
|
|
<div class="text-bg-warning p-3">具有对比色的警告色 .text-bg-warning</div>
|
|
|
|
|
|
<div class="text-bg-info p-3">具有对比色的信息色 .text-bg-info</div>
|
|
|
|
|
|
<div class="text-bg-light p-3">具有对比色的㳀色 .text-bg-light</div>
|
|
|
|
|
|
<div class="text-bg-dark p-3">具有对比色的深色 .text-bg-dark</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="card-footer text-warning">
|
|
|
|
|
|
v5.2 中新增
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="card mt-3">
|
|
|
|
|
|
<div class="card-header .bg-dark-subtle">
|
|
|
|
|
|
在组件和样式类中使用：比如 徽章等, 使用样式类： .text-* .bg-*
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
|
<h2>badge中使用</h2>
|
|
|
|
|
|
<span class="badge text-bg-primary">Primary</span>
|
|
|
|
|
|
<span class="badge text-bg-info">Info</span>
|
|
|
|
|
|
|
|
|
|
|
|
<h2 class="mt-3">card 中使用</h2>
|
|
|
|
|
|
<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
|
|
|
|
|
|
<div class="card-header">头部</div>
|
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
|
<p class="card-text">一些快速的示例文本，以卡片标题为基础，构成卡片的大部分内容。使用 .card-text 新式类</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
|
|
|
|
|
|
<div class="card-header">头部</div>
|
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
|
<p class="card-text">整个卡片div中使用样式类 .text-bg-info</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="card-footer text-warning">
|
|
|
|
|
|
v5.2 中新增
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script src="jquery/jquery-3.6.4.min.js"></script>
|
|
|
|
|
|
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
|
|
|
|
<script src="js/app.js"></script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
