bootstrap简单小结

1.less的继承

1).建议(简洁) 

1 #test{
2 &extend(.father)
3 }

2)不建议

1 #test:extend(.father){
2 }

继承实质上将.father选择器和#test组合成一个选择器,声明块使用.father的内容

all:继承所有和.father相关的声明块

切记父类不能定义成混合(继承不灵活,性能高;混合相对灵活,性能低)

 

2.less的避免编译

~"不会被编译的内容"

变量在less中属于块级作用域,延迟加载

 

3.bootstrap的栅格系统和源码分析

流体容器

   width:auto (PS:width:100%与auto不同,如果有设定padding,width:100%会超过范围再加上padding的值(出现scoll),auto就不会)

   两侧15px 的padding

固定容器:

  阈值(移动优先)

  xs (小于768px)             width:auto

  sm(大于等于768px)      width:720px+槽宽

  md(大于等于992px)      width:940px+槽宽

  lg(大于等于1200px)      width:1140px+槽宽

  两侧15px padding

行

  两侧 -15px margin

列

  公共样式

    两侧有15px的padding

  float

  width 1~12

  left

  right:列排序 0~12 当0时为auto

  列偏移: margin-left (居中)

 

简单使用列偏移的例子

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4          <meta charset = "utf-8">
 5          <title>offset</title>
 6          <link rel = "stylesheet" type="text/css" href="css/bootstrap.min.css"/>  <!--栅格系统主要内容-->
 7     <style type="text/css">
 8          .row{
 9             background: lightblue;
10                }
11          div[class|=col]{
12                   border:1px solid;
13                   }
14      </style>
15     </head>
16    <body>
17        <div class= "container">
18             <div class = "row">
19                  <div class = "col-lg-4 col-lg-offset-4">col-lg-4</div>
20                 <!--居中,offset改的就是margin-left的值-->
21             </div>
22         </div>
23    </body>
24    <script src="jquery.min.js"></script> <!--保持完整性-->
25    <script src ="bootstrap.min.js"></script> <!--保持完整性-->
26 </html>

 

4.列排序

注意阈值上样式的设计不能跳跃(从xs到lg,顺序不能变)

posted @ 2021-04-20 10:20  kunsiter  阅读(52)  评论(0)    收藏  举报