|
|
<!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-secondary-subtle">
|
|
|
背景 background
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
通过渐变来传达意义并添加装饰
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="card mt-3">
|
|
|
<div class="card-header bg-secondary-subtle">
|
|
|
背景颜色：设置背景颜色
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
|
|
|
<div class="p-3 mb-2 bg-primary-subtle text-emphasis-primary">.bg-primary-subtle</div>
|
|
|
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
|
|
|
<div class="p-3 mb-2 bg-secondary-subtle text-emphasis-secondary">.bg-secondary-subtle</div>
|
|
|
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
|
|
|
<div class="p-3 mb-2 bg-success-subtle text-emphasis-success">.bg-success-subtle</div>
|
|
|
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
|
|
|
<div class="p-3 mb-2 bg-danger-subtle text-emphasis-danger">.bg-danger-subtle</div>
|
|
|
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
|
|
|
<div class="p-3 mb-2 bg-warning-subtle text-emphasis-warning">.bg-warning-subtle</div>
|
|
|
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
|
|
|
<div class="p-3 mb-2 bg-info-subtle text-emphasis-info">.bg-info-subtle</div>
|
|
|
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
|
|
|
<div class="p-3 mb-2 bg-light-subtle text-emphasis-light">.bg-light-subtle</div>
|
|
|
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
|
|
|
<div class="p-3 mb-2 bg-dark-subtle text-emphasis-dark">.bg-dark-subtle</div>
|
|
|
<p class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</p>
|
|
|
<p class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</p>
|
|
|
|
|
|
<div class="p-3 mb-2 bg-body text-body">.bg-body</div>
|
|
|
<div class="p-3 mb-2 bg-black text-white">.bg-black</div>
|
|
|
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
|
|
|
<div class="p-3 mb-2 bg-transparent text-body">.bg-transparent</div>
|
|
|
</div>
|
|
|
<div class="card-footer">
|
|
|
<strong class="text-warning">注意：-subctl 为 5.3版本新增的，低版本无效</strong>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="card mt-3">
|
|
|
<div class="card-header .bg-secondary-subtle">
|
|
|
背景渐变：通过添加<mark>.bg-gradient</mark>类，线性渐变将作为背景图像添加到背景中。这种渐变从半透明的白色开始，逐渐淡出到底部
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
<div class="p-3 mb-2 bg-primary text-white">.bg-primary 渐变</div>
|
|
|
<div class="p-3 mb-2 bg-gradient bg-primary-subtle text-emphasis-primary">.bg-primary-subtle 渐变</div>
|
|
|
<div class="p-3 mb-2 bg-gradient bg-secondary text-white">.bg-secondary 渐变</div>
|
|
|
<div class="p-3 mb-2 bg-gradient bg-secondary-subtle text-emphasis-secondary">.bg-secondary-subtle 渐变</div>
|
|
|
<div class="p-3 mb-2 bg-gradient bg-success text-white">.bg-success 渐变</div>
|
|
|
<div class="p-3 mb-2 bg-gradient bg-success-subtle text-emphasis-success">.bg-success-subtle 渐变</div>
|
|
|
<div class="p-3 mb-2 bg-gradient bg-danger text-white">.bg-dange 渐变r</div>
|
|
|
<div class="p-3 mb-2 bg-gradient bg-danger-subtle text-emphasis-danger">.bg-danger-subtle 渐变</div>
|
|
|
<div class="p-3 mb-2 bg-gradient bg-warning text-dark">.bg-warning 渐变</div>
|
|
|
<div class="p-3 mb-2 bg-gradient bg-warning-subtle text-emphasis-warning">.bg-warning-subtle 渐变</div>
|
|
|
<div class="p-3 mb-2 bg-gradient bg-info text-dark">.bg-info 渐变</div>
|
|
|
<div class="p-3 mb-2 bg-gradient bg-info-subtle text-emphasis-info">.bg-info-subtle 渐变</div>
|
|
|
<div class="p-3 mb-2 bg-gradient bg-light text-dark">.bg-light 渐变</div>
|
|
|
<div class="p-3 mb-2 bg-gradient bg-light-subtle text-emphasis-light">.bg-light-subtle 渐变</div>
|
|
|
<div class="p-3 mb-2 bg-gradient bg-dark text-white">.bg-dark 渐变</div>
|
|
|
<div class="p-3 mb-2 bg-gradient bg-dark-subtle text-emphasis-dark">.bg-dark-subtle 渐变</div>
|
|
|
|
|
|
<p class="p-3 mb-2 bg-gradient bg-body-secondary">.bg-body-secondary 渐变</p>
|
|
|
<p class="p-3 mb-2 bg-gradient bg-body-tertiary">.bg-body-tertiary 渐变</p>
|
|
|
|
|
|
<div class="p-3 mb-2 bg-gradient bg-body text-body">.bg-body 渐变</div>
|
|
|
<div class="p-3 mb-2 bg-gradient bg-black text-white">.bg-black 渐变</div>
|
|
|
<div class="p-3 mb-2 bg-gradient bg-white text-dark">.bg-white 渐变</div>
|
|
|
<div class="p-3 mb-2 bg-gradient bg-transparent text-body">.bg-transparent 渐变</div>
|
|
|
</div>
|
|
|
<div class="card-footer">
|
|
|
您的自定义 CSS 中需要渐变吗？只需添加 background-image: var(--bs-gradient);
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="card mt-3">
|
|
|
<div class="card-header .bg-secondary-subtle">
|
|
|
不透明度：从 v5.1.0 开始，实用程序使用 CSS 变量通过 Sass 生成。这允许实时颜色更改，而无需编译和动态 Alpha 透明度更改
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
<h3>附加样式：style="--bs-bg-opacity: .5;"</h3>
|
|
|
<div class="bg-success p-2 text-white">这是默认的成功背景</div>
|
|
|
<div class="bg-success p-2" style="--bs-bg-opacity: .5;">这是50%不透明度的成功背景, 附加样式：style="--bs-bg-opacity: .5;"</div>
|
|
|
|
|
|
<h3>使用样式类：.bg-opacity-75 .bg-opacity-50 .bg-opacity-25 .bg-opacity-10</h3>
|
|
|
<div class="bg-success p-2 text-white">默认成功背景</div>
|
|
|
<div class="bg-success p-2 text-white bg-opacity-75">75% 不透明度的成功背景 bg-opacity-75</div>
|
|
|
<div class="bg-success p-2 text-dark bg-opacity-50">50% 不透明度的成功背景 bg-opacity-50</div>
|
|
|
<div class="bg-success p-2 text-dark bg-opacity-25">25% 不透明度的成功背景 bg-opacity-25</div>
|
|
|
<div class="bg-success p-2 text-dark bg-opacity-10">10% 不透明度的成功背景 bg-opacity-10</div>
|
|
|
</div>
|
|
|
<div class="card-footer text-warning">
|
|
|
注意：v5.1.0 新增
|
|
|
</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> |