diff --git a/BlazorStudy.Bootstrap5Study/BlazorStudy.Bootstrap5Study.csproj b/BlazorStudy.Bootstrap5Study/BlazorStudy.Bootstrap5Study.csproj index 61d7aeb..0b75ce4 100644 --- a/BlazorStudy.Bootstrap5Study/BlazorStudy.Bootstrap5Study.csproj +++ b/BlazorStudy.Bootstrap5Study/BlazorStudy.Bootstrap5Study.csproj @@ -1,4 +1,4 @@ - + net7.0 @@ -37,4 +37,11 @@ + + + true + PreserveNewest + + + diff --git a/BlazorStudy.Bootstrap5Study/wwwroot/index.html b/BlazorStudy.Bootstrap5Study/wwwroot/index.html index 77f5645..3d9ddf9 100644 --- a/BlazorStudy.Bootstrap5Study/wwwroot/index.html +++ b/BlazorStudy.Bootstrap5Study/wwwroot/index.html @@ -39,10 +39,11 @@ 辅助菜单
- 颜色与背景 -
-
- 多彩连接 +
清除浮动
+
颜色与背景
+
多彩连接
+
快速定位
+
宽高比
diff --git a/BlazorStudy.Bootstrap5Study/wwwroot/pages/Helpers/宽高比.html b/BlazorStudy.Bootstrap5Study/wwwroot/pages/Helpers/宽高比.html new file mode 100644 index 0000000..ed52d55 --- /dev/null +++ b/BlazorStudy.Bootstrap5Study/wwwroot/pages/Helpers/宽高比.html @@ -0,0 +1,76 @@ + + + + + 宽高比 + + + + + + + + +
+
+
+ 宽高比: 使用生成的伪元素使元素保持您选择的纵横比。非常适合根据父项的宽度响应式处理视频或幻灯片嵌入。 +
+
+

将父元素中的任何嵌入（如 ）包装为纵横比类。由于我们的通用选择器，直接子元素会自动调整大小。.ratio .ratio-21x9

+
+ +
+
+
+ +
+
+ 纵横比: 纵横比可以使用修饰符类进行自定义。默认情况下，提供以下比率类： +
+
+
+
1x1
+
+
+
4x3
+
+
+
16x9
+
+
+
21x9
+
+
+
+ +
+
+ 自定义比例: +
+
+
+
2x1
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/BlazorStudy.Bootstrap5Study/wwwroot/pages/Helpers/快速定位.html b/BlazorStudy.Bootstrap5Study/wwwroot/pages/Helpers/快速定位.html new file mode 100644 index 0000000..3a774e2 --- /dev/null +++ b/BlazorStudy.Bootstrap5Study/wwwroot/pages/Helpers/快速定位.html @@ -0,0 +1,94 @@ + + + + + 快速定位 + + + + + + + +
+ +
+ +
+
+
+ 快速定位: +
+
+ 利用这些工具类快速设置元素的位置 +
+
+ +
+
+ 固定在顶部: +
+
+ 将一个元素固定在视口（viewport）的顶部且边缘对齐。使用之前请确保你充分了解了该定位对你的项目所带来的影响。你可能还需要添加额外的 CSS。 +
+ +
+
+
+ +
+
+ 固定在底部: +
+
+ 将一个元素固定在视口（viewport）的底部且边缘对齐。使用之前请确保你充分了解了该定位对你的项目所带来的影响。你可能还需要添加额外的 CSS。 +
+ +
+
+
+ +
+
+ 黏着在顶部 sticky: +
+
+ 当页面滚动并经过某个元素之后，该元素被固定在视口（viewport）的顶部且边缘对齐。 +
+
+ +
+
+ 黏着在底部 sticky: +
+
+ 当页面滚动并经过某个元素之后，该元素被固定在视口（viewport）的顶部且边缘对齐。 + +
+
+ +
+
+ 黏着在底部-响应式: +
+
+ 支持响应式 +
当视口（viewport）是 SM (small) 或更宽的尺寸时，黏着在视口（viewport）的底部
+
当视口（viewport）是 MD (medium) 或更宽的尺寸时，黏着在视口（viewport）的底部
+
当视口（viewport）是 LG (large) 或更宽的尺寸时，黏着在视口（viewport）的底部
+
当视口（viewport）是 XL (extra-large) 或更宽的尺寸时，黏着在视口（viewport）的底部
+
当视口（viewport）是 XXL (extra-extra-large) 或更宽的尺寸时，黏着在视口（viewport）的底部
+ +
+
+ +
+ +
+
+ + + + + + \ No newline at end of file diff --git a/BlazorStudy.Bootstrap5Study/wwwroot/pages/Helpers/清除浮动.html b/BlazorStudy.Bootstrap5Study/wwwroot/pages/Helpers/清除浮动.html new file mode 100644 index 0000000..c8410da --- /dev/null +++ b/BlazorStudy.Bootstrap5Study/wwwroot/pages/Helpers/清除浮动.html @@ -0,0 +1,56 @@ + + + + + 清除浮动 + + + + + + + +
+
+
+ 清除浮动: 通过添加 clearfix 工具类，可以快速轻松地清除容器中浮动的内容。 +
+
+

为父级元素 添加 .clearfix 类可以很容易地清除内部的浮动。还可以作为 mixin 使用

+
+ <div class="clearfix">...</div> +
+
+
+

引用该 mixin 的源码

+
+ @mixin clearfix() { + &::after { + display: block; + clear: both; + content: ""; + } + } +
+
+
+

在 SCSS 中作为 mixin 使用：

+
+ .element { @include clearfix;} +
+
+
+

.clearfix 的用法: 如果没有 .clearfix ，父级<div>元素是无法覆盖住两个按钮的，从而导致布局被破坏。

+
+ + +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/BlazorStudy.Bootstrap5Study/wwwroot/pages/holder.html b/BlazorStudy.Bootstrap5Study/wwwroot/pages/holder.html new file mode 100644 index 0000000..06d9357 --- /dev/null +++ b/BlazorStudy.Bootstrap5Study/wwwroot/pages/holder.html @@ -0,0 +1,50 @@ + + + + + + holder.js 插件学习 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/BlazorStudy.Bootstrap5Study/wwwroot/pages/模板页.html b/BlazorStudy.Bootstrap5Study/wwwroot/pages/模板页.html index 0c7b76f..fb7b3d4 100644 --- a/BlazorStudy.Bootstrap5Study/wwwroot/pages/模板页.html +++ b/BlazorStudy.Bootstrap5Study/wwwroot/pages/模板页.html @@ -13,7 +13,7 @@
- 模板页 + 模板页: 普通说明