Bootstrap的学习分享

大家好，这里是demo软件园，今天为大家分享的是Bootstrap的学习分享。

众所周知Bootstrap是一款简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

流体布局容器 容器的width为auto，只是两边加了15px的padding。

固定布局 容器的width会随设备分辨率的不同而生产变化

分辨率阈值

	w >=1200	 	容器的width为1170  左右padding为15 （注意是borderBox）
                    
	1200>w >=992	容器的width为970   左右padding为15 （注意是borderBox）
                    
	992 > w >=768	容器的width为750   左右padding为15  （注意是borderBox）
                    
	768 > w 		容器的width为auto  左右padding为15  （注意是borderBox）
		

栅格源码分析

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

  margin-right: auto;
  margin-left: auto;
  padding-left:  15px;
  padding-right: 15px;	

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.行

margin-left:  -15px;
margin-right: -15px;

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-left: 15px;
  padding-right: 15px;
}
.make-grid(xs)--->
  float-grid-columns(@class);
		 * .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,...col-xs-12{
		 *     float: left;
		 * }

  .loop-grid-columns(@grid-columns, @class, width);
		 * .col-xs-12{
		 *     width:12/12;
		 * }
		 * .col-xs-11{
		 *     width:11/12;
		 * }
		 * ...
		 * .col-xs-1{
		 *     width:1/12;
		 * } 
                 
  .loop-grid-columns(@grid-columns, @class, pull);
  
  .loop-grid-columns(@grid-columns, @class, push);
		 *push                  pull:
		 * .col-xs-push-12{         .col-xs-pull-12{      
		 *     left:12/12;              right:12/12;
		 * }                        }
		 * .col-xs-push-11{
		 *     left:11/12;
		 * }
		 * ...                      ...
		 * .col-xs-push-1{
		 *     left:1/12;
		 * } 
		 * .col-xs-push-0{           
                 .col-xs-pull-0{
		 *     left:auto;               
                       right:auto;
		 * }                         }		 
  .loop-grid-columns(@grid-columns, @class, offset);

列偏移 调整的是margin-left，分13个等级（0到12）0时为0%

列排序 push的时候调整的是left，分13个等级（0到12） 0时为auto

pull的时候调整的是right，分13个等级（0到12） 0时为auto

容器与栅格盒模型设计的精妙之处

container容器提供了一个15px的padding

row是column直接存在的容器，row默认最多可有12个column，

同时作为都是左浮动的column的wrapper，自带 clearfix 的性质。

同时row还有一个很特殊的地方，就是左右各有-15px的margin，

为了抵消container中15px的padding

每个column也会有15px的水平方向的padding，colunmn只能在row中生存，

由于row的margin 为－15px，那么位于两边的column就碰到了container的边界。

但是colunmn 本身又有15px的padding使得它其中的内容并不会碰到 container，同时，不同column的内容之间就有 了30px的槽，目的是为了确保列与列之间有30px的槽，列与容器之间有15px的槽。

简单来说，就是：

容器两边具有15px的padding

行 两边具有-15px的margin
列 两边具有15px的padding

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

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

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