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