1.bootstrap是什么？

2.栅格模型设计的精妙之处.

3.预备知识

1.栅格中容器有两类之分，一类是流体容器，一类是固定容器.

2.固定容器有阈值

注：槽宽可以自定义

4.栅格系统的框架

代码与案例如下：

<body>
    <!-- 这里是容器 -->
  <div class="container">  
    <!-- 这里是行 -->
     <div class="row">   
        <!-- 这里是列  lg表示阈值  -->
         <div class="col-lg-10">col-lg-10</div>
         <!-- 一行默认12列 -->
         <div class="col-lg-2">col-lg-2</div>
     </div> 
  </div>
</body>

效果图如下，将一行分为两列，一列占10，一列占2

接下来我们再多增加几行划分不同的列。

<body>
    <!-- 这里是容器 -->
  <div class="container">  
    <!-- 这里是行 -->
     <div class="row">   
        <!-- 这里是列  lg表示阈值  -->
         <div class="col-lg-10">col-lg-10</div>
         <!-- 一行默认12列 -->
         <div class="col-lg-2">col-lg-2</div>

         <div class="col-lg-6">col-lg-6</div>
         <div class="col-lg-6">col-lg-6</div>

         <div class="col-lg-3">col-lg-3</div>
         <div class="col-lg-9">col-lg-9</div>

         <div class="col-lg-8">col-lg-8</div>
         <div class="col-lg-4">col-lg-4</div>
     </div> 
  </div>
</body>

效果如下：

4.1bootstrap容器

4.1.1固定容器与流体容器公共样式

1.我们在源码中可以grid.less,代码如下

<!--- 固定容器与流体容器的公共样式-->
.container-fixed(@gutter: @grid-gutter-width) {
  padding-right: ceil((@gutter / 2));
  padding-left: floor((@gutter / 2));
  margin-right: auto;
  margin-left: auto;
  &:extend(.clearfix all);
}

2.在 variables.less中我们可以查询到@grid-gutter-width 这就是槽宽30px。

3.接下来我们分析，ceil表示向上取整 ,floor表示向下取整，即为15px。

  padding-right: ceil((@gutter / 2));
  padding-left: floor((@gutter / 2));

4.1.2固定容器样式

1.在grid.less中找到固定容器的定义。

.container-fixed();

  @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;
  }
}

2.在 variables.less中我们可以查询到 @screen-sm-min @screen-md-min @screen-lg-min 分别为

720px+槽宽，940px+槽宽，1140px+槽宽。

// Small screen / tablet
@container-tablet:             (720px + @grid-gutter-width);
//** For `@screen-sm-min` and up.
@container-sm:                 @container-tablet;

// Medium screen / desktop
@container-desktop:            (940px + @grid-gutter-width);
//** For `@screen-md-min` and up.
@container-md:                 @container-desktop;

// Large screen / wide desktop
@container-large-desktop:      (1140px + @grid-gutter-width);
//** For `@screen-lg-min` and up.
@container-lg:                 @container-large-desktop;

4.2.bootstrap行与列

4.2.1行

1.在grid.less中找到行的定义。

.row {
  .make-row();
}
//  @grid-gutter-width为槽宽 30px
.make-row(@gutter: @grid-gutter-width) {
  margin-right: floor((@gutter / -2));
  margin-left: ceil((@gutter / -2));
  &:extend(.clearfix all);
}

2.经过分析可知margin-right：-15px;

margin-left : -15px;

4.2.2列

列的第一步：

1.在grid.less中找到列的定义。

.make-grid-columns();
.make-grid(xs);
@media (min-width: @screen-sm-min) {
  .make-grid(sm);
}
@media (min-width: @screen-md-min) {
  .make-grid(md);
}

@media (min-width: @screen-lg-min) {
  .make-grid(lg);
}

2.在grid-framework中找到.make-grid-columns(）；

.make-grid-columns() {
  .col(@index) { //index 为1
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { // terminal
    @{list} {
      position: relative;
      min-height: 1px;
      padding-right: floor((@grid-gutter-width / 2));
      padding-left: ceil((@grid-gutter-width / 2));
    }
  }
  .col(1); // kickstart it
}

3.其中有三个混合，第一个混合调用.col(2,".col-xs-1, .col-sm-1, .col-md-1, .col-lg-1")

第二个混合为递归，第二个混合调用

.col(3,.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(13,str)

str:

.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

第三个混合调用，将

.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变成选择器

列的第二步：

1.在grid-framework中找到.make-grid(xs),.make-grid(sm),..make-grid(md),make-grid(lg)；

.make-grid(@class) {
  .float-grid-columns(@class);
  .loop-grid-columns(@grid-columns, @class, width);
  .loop-grid-columns(@grid-columns, @class, pull);
  .loop-grid-columns(@grid-columns, @class, push);
  .loop-grid-columns(@grid-columns, @class, offset);
}

2.找到.float-grid-columns 进行分析

.float-grid-columns(@class) {
  .col(@index) { 
    @item: ~".col-@{class}-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { 
    @item: ~".col-@{class}-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) {
    @{list} {
      float: left;
    }
  }
  .col(1); // kickstart it
}

3.其中有三个混合，第二个混合为递归，分别得到 .col-xs-1, .col-xs-2, .col-xs-3, ... .col-xs-12,

第三个混合调用，将 .col-xs-1, .col-xs-2, .col-xs-3, ... .col-xs-12,变成选择器.

列的第三步：

.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
  .calc-grid-column(@index, @class, @type);
  // next iteration
  .loop-grid-columns((@index - 1), @class, @type);
}

.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
  .col-@{class}-@{index} {
    width: percentage((@index / @grid-columns));
  }
}

分析：其中index=12，class为学生，type为width的情况，递归结果如下。

.col-xs-12{ width:12/12%}

.col-xs-11{ width:11/12%}

.col-xs-10{ width:10/12%}

...

.col-xs-1{ width:1/12%}

4.3.bootstrap列排序与列偏移

4.3.1列偏移

.calc-grid-column(@index, @class, @type) when (@type = offset) {
  .col-@{class}-offset-@{index} {
    margin-left: percentage((@index / @grid-columns));
  }
}

4.3.2列排序

.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
  .col-@{class}-push-@{index} {
    left: percentage((@index / @grid-columns));
  }
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
  .col-@{class}-push-0 {
    left: auto;
  }
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
  .col-@{class}-pull-@{index} {
    right: percentage((@index / @grid-columns));
  }
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
  .col-@{class}-pull-0 {
    right: auto;
  }
}

以上俩种情况分析同type为width时，不同在于可以取到0，并且取到0时的设置不同。