【Java系列笔记018】BootStrap简单入门（完结）

第十三章：BootStrap

第一节：容器

1.1 流体容器

<div class="container-fluid">
    test
</div>

1.2 固定容器

<div class="container">
    test
</div>

阈值：

• 大于等于1200(lg大屏pc)：容器大小为1170(1140+槽宽)px
• 大于等于992<=1200(md中屏pc)：容器大小为970(940+槽宽)px
• 大于等于768小于762(sm平板)：容器大小为750(720+槽宽)px
• 小于768(xs移动手机)：容器大小为auto

容器源码分析

1. 流体容器&固定容器的公共样式

   padding-right: ceil((@gutter槽宽 / 2));//向上取整
   padding-left: floor((@gutter / 2));//向下取整
   margin-right: auto;
   margin-left: auto;
   &:extend(.clearfix all);
   

2. 固定容器特定样式

   顺序不可变

   @media (min-width: @screen-sm-min) {
     width: @container-sm;
   }
   @media (min-width: @screen-md-min) {
     width: @container-md;
   }
   @media (min-width: @screen-lg-min) {
     width: @container-lg;
   } 
   

1.3 栅格系统

<div class="container">
    <div class="row">
        <div class="col-lg-10">col-lg-10</div>
        <div class="col-lg-2">col-lg-2</div>
    </div>
</div>

默认一行分成了12列

源码分析

1. 流体容器&固定容器的公共样式

   padding-right: ceil((@gutter槽宽 / 2));//向上取整
   padding-left: floor((@gutter / 2));//向下取整
   margin-right: auto;
   margin-left: auto;
   &:extend(.clearfix all);
   

2. 固定容器特定样式

   顺序不可变

   @media (min-width: @screen-sm-min) {
     width: @container-sm;
   }
   @media (min-width: @screen-md-min) {
     width: @container-md;
   }
   @media (min-width: @screen-lg-min) {
     width: @container-lg;
   } 
   

3. 行

   //行
   .make-row(@gutter: @grid-gutter-width) {
     margin-right: floor((@gutter / -2));//-15px
     margin-left: ceil((@gutter / -2));//-15px
     &:extend(.clearfix all);//q
   }
   

4. 列

   //列第一步
   .make-grid-columns();--->
   
   .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
   .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
   ...,
   .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
       position: relative;
       min-height: 1px;
       padding-right: floor((@grid-gutter-width / 2));15px
       padding-left: ceil((@grid-gutter-width / 2));15px
     }
   //移动优先
   //列第二步
   .make-grid(@class)-->{
      .float-grid-columns(@class);
       /**2.1
      		.col-xs-1,.col-xs-2,.col-xs-3,..,.col-xs-12{
       	float:left
       	}
    	*/ 
     .loop-grid-columns(@grid-columns, @class, width);
       /**2.2
             .col-xs-12{
               width:（12/12)*100%;
             }
             .col-xs-11{
               width:（11/12)*100%;
             }
             .col-xs-10{
               width:（10/12)*100%;
             }
             ...
             .col-xs-1{
               width:（1/12)*100%;
             }
    */
       
   	//2.3 (列排序)
       /**
     2.3
     pull                                pull
     .col-xs-12{                         .col-xs-12{
       left:（12/12)*100%;                   right:（12/12)*100%;
     }                                   }
     .col-xs-11{                         .col-xs-11{
       left:（11/12)*100%;                    right:（11/12)*100%;
     }                                   }
     .col-xs-10{                         .col-xs-10{
       left:（10/12)*100%;                    right:（10/12)*100%;
     }                                   }
     ...                                   ...
     .col-xs-0{                          .col-xs-0{
       left: auto;                            right: auto;
     }                                   }
    */
     .loop-grid-columns(@grid-columns, @class, pull);
     .loop-grid-columns(@grid-columns, @class, push);
       //2.4 （列偏移）
       /**
     2.4
     offset
     .col-xs-offset-12{
       margin-left:（12/12)*100%;
     }
     .col-xs-offset-11{
       margin-left:（11/12)*100%;
     }
     .col-xs-offset-10{
       margin-left:（10/12)*100%;
     }
     ...
     .col-xs-offset-0{
       margin-left: 0;
     }
    */
     .loop-grid-columns(@grid-columns, @class, offset);
   }
   

1.4 响应式工具

到达指定条件显示

.visible-xs
.visible-sm
.visible-md
.visible-lg

.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block 

到达指定条件隐藏

.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg

.hidden-xs-block,
.hidden-xs-inline,
.hidden-xs-inline-block,
.hidden-sm-block,
.hidden-sm-inline,
.hidden-sm-inline-block,
.hidden-md-block,
.hidden-md-inline,
.hidden-md-inline-block,
.hidden-lg-block,
.hidden-lg-inline,
.hidden-lg-inline-block 

1.5 栅格盒模型设计的精妙之处

容器上两边具有15px的padding

行 两边有-15px的margin

列 两边有15px的padding

为了维护槽的规则，列两边必须得有15px的padding

为了能使列嵌套行，行两边必须要有-15px的margin

为了让容器可以包裹住行，容器两边必须要有15px的padding

1.6 复习

less的继承

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

#test {
    &:extend(.father)
}

#test:extend(.father){
    
}
all:继承和.father相关的声明块
切记父类不能定义成混合（继承不灵活性能高 混合灵活性能低）

less的避免编译

~"不会被编译的内容"

**注意：**变量在less中属于块级作用域，延迟加载

bootstrap栅格系统&源码分析

流体容器

• **width:**auto
• 两侧15px padding

固定容器

• 阈值：
  • xs：（小于768px） width：auto
  • sm：（大于等于768px） width：720+槽宽
  • md：（大于等于992px）width：940+槽宽
  • lg：（大于等于1200px）width：1140+槽宽
• 两侧15px padding

行

• 两侧-15px margin

列

• 公共样式：

  • 两侧有15px的padding
  • 相对定位

• float

• width：1~12

• left：0~12

  • 0：auto

• right：0~12

  • 0：auto

• margin-left：0~12

列排序

**注意：**阈值上样式的设置不能跳跃