Bootstrap
/
BootstapStudy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '878da67170'
${ noResults }
BootstapStudy/BlazorStudy.Bootstrap5Study/wwwroot/pages/Utilities/background.html

118 lines
7.3 KiB
HTML
Raw Normal View History Unescape Escape

feats: 升级到Bootstrap5.3
2 years ago
<!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">
feat: 背景
2 years ago
<div class="card-header bg-secondary-subtle">
背景 background
feats: 升级到Bootstrap5.3
2 years ago
</div>
<div class="card-body">
feat: 背景
2 years ago
通过渐变来传达意义并添加装饰
</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>
feats: 升级到Bootstrap5.3
2 years ago
</div>
<div class="card-footer">
feat: 背景
2 years ago
您的自定义 CSS 中需要渐变吗？只需添加 background-image: var(--bs-gradient);
feats: 升级到Bootstrap5.3
2 years ago
</div>
</div>
feat: 普通更新
2 years ago
<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>
feats: 升级到Bootstrap5.3
2 years ago
</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>