尚硅谷bootstrap教程-栅格源码阅读1

第一点：找源码

grid就是栅格的意思。

在mixins当中，如上图两个less文件，是和栅格有关的，要阅读一下。

总共从源码当中，拿出来栅格相关的四个文件，就是如下图所示：

第二点：读源码

variables.less这个文件当中，放置的，都是bootstrap当中变量。

1. grid.less代码整理和注释

//固定容器
.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();//调用混合
}
//行
.row {
  .make-row();
}
.row-no-gutters {
  margin-right: 0;
  margin-left: 0;

  [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}
// 列
.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.less -> mixins/grid.less

在跟grid.less同级别的，有一个文件叫做，mixins.less文件。

这个mixins.less文件里面，通过@import语句，将mixins文件夹下面的.less文件都引入进来了。

所以在grid.less当中可以直接调用混合，.container-fixed()。

.container-fixed()是在mixins/grid.less中，如下图所示：

3. mixins/grid.less & variables.less

//固定容器和流体容器的公共样式
//@grid-gutter-width：grid是栅格的意思，gutter是槽的意思，这个表示槽宽。
//@grid-gutter-width在variables.less当中定义，默认值是30px
.container-fixed(@gutter: @grid-gutter-width) {
  padding-right: ceil((@gutter / 2));//ceil是less的内置函数，是天花板的意思，是向上取整
  padding-left: floor((@gutter / 2));//floor是less的内置函数，是地板的意思，是向下取整
  margin-right: auto;
  margin-left: auto;
  &:extend(.clearfix all);//继承了一个minxins/clearfix.less。表示流体容器和固定容器是清除浮动的。
}

3.1. gutter-槽宽

4. 源码分析

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

上面的样式，就是流体容器和固定容器的，公共样式。

并且是清除浮动的。

我们看一下流体容器的样式：

5. grid.less分析

在固定容器的媒体查询中，下面的变量是什么意思呢？

这三个变量，我们都可以在variables.less当中找到对应的值：

那么，在grid.less当中固定容器的样式中，下面三个值，宽度代表的是什么意思呢？

第三点：总结：

本篇守护女神-金晨