Bootstrap
/
BootstapStudy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 背景

Browse Source
main
bicijinlian 2 years ago
parent 3e369b4d1a
commit 6eb8131e97
2 changed files with 86 additions and 13 deletions
Show Stats Download Patch File Download Diff File

25
BlazorStudy.Bootstrap5Study/wwwroot/index.html
Unescape Escape View File

@ -13,15 +13,22 @@
<body> <body>
<div class="container"> <div class="container">
<ul> <div class="card mt-3">
<li> <div class="card-header bg-secondary-subtle">
<a href="pages/layouts/layout_1.html">布局</a> 通用菜单
</li> </div>
<div class="card-body">
<li> <a target="_blank" href="pages/Utilities/background.html">背景颜色</a>
<a href="pages/Utilities/background.html">背景颜色</a> </div>
</li> </div>
</ul> <div class="card mt-3">
<div class="card-header bg-secondary-subtle">
页面布局
</div>
<div class="card-body">
<a target="_blank" href="pages/layouts/layout_1.html">布局页</a>
</div>
</div>
</div> </div>
<script src="jquery/jquery-3.6.4.min.js"></script> <script src="jquery/jquery-3.6.4.min.js"></script>
<script src="bootstrap/js/bootstrap.bundle.min.js"></script> <script src="bootstrap/js/bootstrap.bundle.min.js"></script>

74
BlazorStudy.Bootstrap5Study/wwwroot/pages/Utilities/background.html
Unescape Escape View File

@ -12,14 +12,80 @@
<body> <body>
<div class="container"> <div class="container">
<div class="card mt-3"> <div class="card mt-3">
<div class="card-header .bg-dark-subtle"> <div class="card-header bg-secondary-subtle">
背景颜色 <strong class="text-bg-danger">注意：-subctl 为 5.3版本新增的，低版本无效</strong> 背景 background
</div> </div>
<div class="card-body"> <div class="card-body">
<img src="holder.js/300x200?text=模板页" alt="" /> 通过渐变来传达意义并添加装饰
</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>
<div class="card-footer"> <div class="card-footer">
用作新页面模板 您的自定义 CSS 中需要渐变吗？只需添加 background-image: var(--bs-gradient);
</div> </div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save