bootstrap栅格源码解析

2024-03-05 23:52:25

Bootstrap的栅格源码

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

// 固定和流体容器的公共样式
//@grid-gutter-widt：槽宽
.container-fixed(@gutter: @grid-gutter-width) { //
  margin-right: auto;
  margin-left: auto;
  padding-left:  floor((@gutter / 2));
  padding-right: ceil((@gutter / 2));
  &:extend(.clearfix all);  //继承
}
// 行
.make-row(@gutter: @grid-gutter-width) {
  margin-left:  ceil((@gutter / -2));
  margin-right: floor((@gutter / -2));
  &:extend(.clearfix all);
}

2.调用混合入口

//固定容器
.container {
  .container-fixed(); //定义左右padding，margin,清除浮动
  @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;
  }
}

//流体容器
.container-fluid {
  .container-fixed();
}

// 行
.row {
  .make-row();
}

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

3，定义列的混合

// 列第一步
.make-grid-columns() {
   //.col(2,".col-xs-1, .col-sm-1, .col-md-1, .col-lg-1")
  .col(@index) {
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col((@index + 1), @item);
  }


    /*  递归
        .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(@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-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;
        }
    */
  .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) {
    //2.1
  .float-grid-columns(@class);
    //2.2
  .loop-grid-columns(@grid-columns, @class, width);
    //2.3(列排序)
  .loop-grid-columns(@grid-columns, @class, pull);
  .loop-grid-columns(@grid-columns, @class, push);
    //2.4(列偏移)
  .loop-grid-columns(@grid-columns, @class, offset);
}



//2.1
/*
 * .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,...col-xs-12{
 *     float: left;
 * }
 * */
.float-grid-columns(@class) {
  .col(@index) {
    @item: ~".col-@{class}-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general
    @item: ~".col-@{class}-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { // terminal
    @{list} {
      float: left;
    }
  }
  .col(1);
}

//2.2（width） 2.3（pull push） 2.4（offset）的入口
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
  .calc-grid-column(@index, @class, @type);
  .loop-grid-columns((@index - 1), @class, @type);
}


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






//2.3
/*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;
 * }                         }
 * */
.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;
  }
}



//2.4
/*
 * .col-xs-offset-12{
 *     margin-left:12/12;
 * }
 * .col-xs-offset-11{
 *     margin-left:11/12;
 * }
 * ...
 * .col-xs-offset-1{
 *     margin-left:1/12;
 * }
 * .col-xs-offset-0{
 *     margin-left:0;
 * }
 * */
.calc-grid-column(@index, @class, @type) when (@type = offset) {
  .col-@{class}-offset-@{index} {
    margin-left: percentage((@index / @grid-columns));
  }
}

4.笔记

###容器
    1.流体容器 width为auto
    2.固定容器
                阈值min-width                        width
            大于等于1200(lg 大屏pc)           1170（1140+槽宽）

            大于等于992(md 中屏pc)             970（940+槽宽）
            小于1200

            大于等于768(sm 平板)             750（720+槽宽）
            小于992

            小于768(xs 移动手机)            auto
    3.栅格系统


###栅格源码分析
    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);

###响应式工具


###栅格盒模型设计的精妙之处
    容器两边具有15px的padding    、
    行    两边具有-15px的margin
    列    两边具有15px的padding

    为了维护槽宽的规则，
        列两边必须得要15px的padding
    为了能使列嵌套行
        行两边必须要有-15px的margin
    为了让容器可以包裹住行
        容器两边必须要有15px的padding

码农公寓

相关文章