add bootstrap

SakuraMuxia · Mar 22, 2024 · be0ee59 · be0ee59
1 parent 78df880
commit be0ee59
Show file tree

Hide file tree

Showing 6 changed files with 956 additions and 3 deletions.
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
@@ -40,8 +40,8 @@ export default defineConfig({
             link: '/front-end/02-JavaScript/'
           },
           {
-            text: 'BootStrap',
-            link: '/front-end/'
+            text: '03-BootStrap',
+            link: '/front-end/03-Bootstrap/'
           },
           {
             text: 'ES6',
@@ -152,6 +152,7 @@ export default defineConfig({
 sidebar: {
     "/front-end/01-HTML5CSS3/": set_sidebar("/docs/front-end/01-HTML5CSS3/"),
     "/front-end/02-JavaScript/": set_sidebar("/docs/front-end/02-JavaScript/"),
+    "/front-end/03-Bootstrap/": set_sidebar("/docs/front-end/03-Bootstrap/"),
 },
 //---------------------------------------------------------------
     // 设置搜索框的样式

diff --git a/docs/front-end/01-HTML5CSS3/10-CSS样式继承.md b/docs/front-end/01-HTML5CSS3/10-CSS样式继承.md
@@ -19,11 +19,68 @@ p 自带 上下外边距
 em 自带 font-style
 strong 自带 font-weight
 a 自带 color、text-decoration、cursor
-ul、ol 自带 padding-left、上下外边距
+ul、ol 自带 padding-left、上下外边距 设置list-style为none
 input输入框自带 outline属性 有内边框 
 button的默认显示的尺寸就是border-box
 ```
 
+**清除CSS自带样式** -- reset.css
+
+```css
+/* Reset CSS */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+
+body {
+    line-height: 1;
+}
+
+ol, ul {
+    list-style: none;
+}
+
+blockquote, q {
+    quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content: '';
+    content: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+```
+
+
+
 ## 权重
 
 ```js

diff --git a/docs/front-end/01-HTML5CSS3/30-响应式布局.md b/docs/front-end/01-HTML5CSS3/30-响应式布局.md
@@ -133,6 +133,13 @@
     <source srcset="./images/Banner-M.png" media="(max-width:1024px)">
     <img src="./images/Banner-L.png" alt="">
 </picture>
+
+
+对picture设置样式的时候，只需要设置img的属性就可以
+.img{
+	//参照父元素100%
+	width:100%
+}
 ```
 
 **方案四 使用 img 标签的 srcset 属性**

diff --git a/docs/front-end/01-HTML5CSS3/34-CSS预处理器.md b/docs/front-end/01-HTML5CSS3/34-CSS预处理器.md
@@ -551,6 +551,24 @@ Less 可以使用 when 关键字实现条件判断
 }
 ```
 
+less条件判断案例--混合的递归调用--栅格动态响应系统
+
+```less
+.grid(@type:xs) {
+    //条件判断：当数量小于栅格列数
+    .make-col(@num) when (@num <= @columns) {
+        //变量名拼接 作为类名传入
+        .col-@{type}-@{num} {
+            width: percentage((@num/@columns))
+        }
+        .make-col(@num+1);
+    }
+    .make-col(1);
+}
+```
+
+
+
 ### Less 导入
 
 **导入 less 文件：**