Bootstrap 栅格源码解析(一)

Bootstrap 栅格源码解析(一)

容器

源码部分

// 固定容器
.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;
  }
}

// Fluid container 流体容器
//
// Utilizes the mixin meant for fixed width containers, but without any defined
// width for fluid, full width layouts.

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

对应变量(位于variable.less中):

• @screen-sm-min : 768px
• @screen-md-min : 992px
• @screen-lg-min : 1200px

tips:

• 大于1200px 为大屏pc
• 大于992px 小于1200px 为小屏pc
• 大于768px 小于992px 为平板
• 小于768px 为移动设备

调用了混入

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

对应变量(位于variable.less中):

• @grid-gutter-width : 30px 表现为容器中两边各有15px内边距

继承了.clearfix(位于utilities.less中),用于清除浮动

.clearfix {
  .clearfix();
}

调用了混入(位于clearfix.less中)

.clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

行

// Row
//
// Rows contain and clear the floats of your columns.

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

对应变量(位于variable.less中):

• @grid-gutter-width : 30px

继承了.clearfix(位于utilities.less中),用于清除浮动

.clearfix {
  .clearfix();
}

调用了混入(位于clearfix.less中)

.clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

主要是添加了左右两边-15px的外边距和清除浮动