From 6eb8131e97ec3a4739fe451974d5293718468d58 Mon Sep 17 00:00:00 2001
From: bicijinlian <bicijinlian@163.com>
Date: Mon, 24 Apr 2023 00:16:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=83=8C=E6=99=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../wwwroot/index.html | 25 ++++---
.../wwwroot/pages/Utilities/background.html | 74 ++++++++++++++++++-
2 files changed, 86 insertions(+), 13 deletions(-)
diff --git a/BlazorStudy.Bootstrap5Study/wwwroot/index.html b/BlazorStudy.Bootstrap5Study/wwwroot/index.html
index cbfebb0..1523b94 100644
--- a/BlazorStudy.Bootstrap5Study/wwwroot/index.html
+++ b/BlazorStudy.Bootstrap5Study/wwwroot/index.html
@@ -13,15 +13,22 @@
<body>
<div class="container">
- <ul>
- <li>
- <a href="pages/layouts/layout_1.html">布局</a>
- </li>
-
- <li>
- <a href="pages/Utilities/background.html">背景颜色</a>
- </li>
- </ul>
+ <div class="card mt-3">
+ <div class="card-header bg-secondary-subtle">
+ 通用菜单
+ </div>
+ <div class="card-body">
+ <a target="_blank" href="pages/Utilities/background.html">背景颜色</a>
+ </div>
+ </div>
+ <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>
<script src="jquery/jquery-3.6.4.min.js"></script>
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
diff --git a/BlazorStudy.Bootstrap5Study/wwwroot/pages/Utilities/background.html b/BlazorStudy.Bootstrap5Study/wwwroot/pages/Utilities/background.html
index 45d07fa..645bfa5 100644
--- a/BlazorStudy.Bootstrap5Study/wwwroot/pages/Utilities/background.html
+++ b/BlazorStudy.Bootstrap5Study/wwwroot/pages/Utilities/background.html
@@ -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>