Bootstrap栅格源码列的递归调用解读--less递归

一、基本概念

           在解读栅格列的源码之前，我们需要先了解一下，栅格容器组成。

容器分为两种：流体容器、固定容器


        流体容器：container-fluid（类名）
                          width：100%（直接取父级 的百分百）


         固定容器：container（类名）
         固定容器有三个阈值，不同的阈值对应不同的终端，这就体现了响应式布局
                           阈值                                               width
            1200（>=1200）大屏（PC端）       1170px（1140+槽宽）
            1992 (<1200）中屏（PC）                   970px（940+槽宽）
            768 (<992）小屏（平板）                    750px（720+槽宽）
            默认 (768) 移动端（手机）                          auto


【Bootstrap中槽宽（gutter）默认为30px】

二、Bootstrap栅格源码列的所在位置

Bootstrap源码免费下载地址
1、首先我们要把Bootstrap源码与栅格系统有关的代码取出来方便阅读

2、取出来之后像我这个样子 文件下载地址

三、列的栅格源码解读

//栅格系统例的源码
//第一步：先利用less递归创建栅格源码的每一列，并且给每一列加上公共样式
.make-grid-columns() {
  .col(@index) { 
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col((@index + 1), @item);
  }
  //less的变量是块级作用域，所以index取值为1
  //~表示避免编译，所以上面代码解读如下
  //.col((2), .col-xs-@{1}, .col-sm-@{1}, .col-md-@{1}, .col-lg-@{1})
  //其中:xs--移动端、sm--平板、md--中屏pc、lg--大屏pc


  //less递归开始
  //第一次递归的参数： index:2  list:.col-xs-@{1}, .col-sm-@{1}, .col-md-@{1}, .col-lg-@{1}
  //第二次递归的参数： index:3  list:.col-xs-@{1}, .col-sm-@{1}, .col-md-@{1}, .col-lg-@{1} .col-xs-@{2}, .col-sm-@{2}, .col-md-@{2}, .col-lg-@{2}
  //...
  //以此类推，直到不满足@index =< @grid-columns为止，
  //@grid-columns的值是12,12是栅格系统的列的最大值
  .col(@index, @list) when (@index =< @grid-columns) {
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  //结果如下.col((13), ~"col-xx-1....col-xx-2");

  //拿取上面递归的结果，给每一列加上公共样式
  .col(@index, @list) when (@index > @grid-columns) { 
    @{list} {
      position: relative;
      min-height: 1px;
      padding-left:  ceil((@grid-gutter-width / 2));
      padding-right: floor((@grid-gutter-width / 2));
    }
  }
  .col(1); 
}

//第二步：利用第一步创建的列，给每一个列加上样式
.make-grid(@class) {
  .float-grid-columns(@class); //给每一个列加上浮动
  .loop-grid-columns(@grid-columns, @class, width); //给每一个列加上不同的宽度 percentage((@index / 12));
  .loop-grid-columns(@grid-columns, @class, pull); //左推
  .loop-grid-columns(@grid-columns, @class, push);//右拉
  .loop-grid-columns(@grid-columns, @class, offset);//给每一个列加上左边距
}


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


.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); 
}



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


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



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