Gird

设置主体的宽度和子模块的宽度

1. container & container-fluid

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

.container-fluid {
    .container-fixed();
}

效果就是container会去响应设置宽度为多少,

而container-flxed则默认100%.

.container-fixed()执行代码

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

1. margin-lef/right:auto设置居中
2. 设置padding
3. 继承.cleafix的所有样式.(.cleafix主要作用:清除浮动,参考http://zh.learnlayout.com/clearfix.html)

2. .row

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  margin-left:  ceil((@gutter / -2));
  margin-right: floor((@gutter / -2));
  &:extend(.clearfix all);
}

主要是清除浮动和设置间距

3. col-@{type}-@{index}

type主要有xs & sm & md & lg

index 有1~12(默认)

``

Bootstrap如何生成这么多class?

.make-grid-columns() {
  .col(@index) { // initial
    @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;
      // Prevent columns from collapsing when empty
      min-height: 1px;
      // Inner gutter via padding
      padding-left:  ceil((@grid-gutter-width / 2));
      padding-right: floor((@grid-gutter-width / 2));
    }
  }
  .col(1); // kickstart it
}

note ~代表避免LESS错误的编译

这个程序从最后一行开始执行.

首先.col(@index)把所有类型都写一次,其实这里的index就是1,这个函数也只执行一遍,

然后col-@type-2~12的class名字都通过第二个.clo(...)函数生成的.

最后一个.clo(...)的@list代表给前面生成的col-@{type}-@{index}设置定位方式和间距.

好了,基于样式定好了,怎么给type定义具体的宽度和漂浮呢

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

这里可能是为了省性能?.根据不同的尺寸生成特定的class

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

这里.float-grid-columns(@class)和.make-grid-columns()实现方式是类似的,.float-grid-columns(@class)只是为了给特定的col-@{type}-@{index}设置一个float: left

其实这里我不明白为什么一开始要.make-grid-columns(),这个方法我觉得是可以和.float-grid-columns(@class)合在一起的?.

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

.loop-grid-columns的函数和之前的设置相反,是从12开始反着来的,这应该是为了当class设了多个相同type,然后以小的为准?.(笔者测试了一下,当col-md-4 & col-md-5一起写,永远起的是col-md-4的作用,这应该可以说明声明class顺序和作用无关,CSS样式表中的顺序才是关键)

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

这里可以看出来

col的宽度百分比设置

push & pull 通过left & right实现的

然后offset则是通过margin-left实现的.

push和pull的0的设置何用,主要是为了方便left:auto & right:auto的实现吗.?

还有一点比较奇怪,mixins/grid-framework.less & `mixins/gird.less看起来的作用是一样的?难道后者为了旧版本兼容?.