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 @@
- +
+
+ 通用菜单 +
+
+ 背景颜色 +
+
+
+
+ 页面布局 +
+
+ 布局页 +
+
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 @@
-
- 背景颜色 注意：-subctl 为 5.3版本新增的，低版本无效 +
+ 背景 background
- + 通过渐变来传达意义并添加装饰 +
+
+ +
+
+ 背景颜色：设置背景颜色 +
+
+
.bg-primary
+
.bg-primary-subtle
+
.bg-secondary
+
.bg-secondary-subtle
+
.bg-success
+
.bg-success-subtle
+
.bg-danger
+
.bg-danger-subtle
+
.bg-warning
+
.bg-warning-subtle
+
.bg-info
+
.bg-info-subtle
+
.bg-light
+
.bg-light-subtle
+
.bg-dark
+
.bg-dark-subtle
+

.bg-body-secondary

+

.bg-body-tertiary

+ +
.bg-body
+
.bg-black
+
.bg-white
+
.bg-transparent
+
+
+ 注意：-subctl 为 5.3版本新增的，低版本无效 +
+
+ +
+
+ 背景渐变：通过添加.bg-gradient类，线性渐变将作为背景图像添加到背景中。这种渐变从半透明的白色开始，逐渐淡出到底部 +
+
+
.bg-primary 渐变
+
.bg-primary-subtle 渐变
+
.bg-secondary 渐变
+
.bg-secondary-subtle 渐变
+
.bg-success 渐变
+
.bg-success-subtle 渐变
+
.bg-dange 渐变r
+
.bg-danger-subtle 渐变
+
.bg-warning 渐变
+
.bg-warning-subtle 渐变
+
.bg-info 渐变
+
.bg-info-subtle 渐变
+
.bg-light 渐变
+
.bg-light-subtle 渐变
+
.bg-dark 渐变
+
.bg-dark-subtle 渐变
+ +

.bg-body-secondary 渐变

+

.bg-body-tertiary 渐变

+ +
.bg-body 渐变
+
.bg-black 渐变
+
.bg-white 渐变
+
.bg-transparent 渐变
- 用作新页面模板 + 您的自定义 CSS 中需要渐变吗？只需添加 background-image: var(--bs-gradient);