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:

が1200 pxより大きいのは大画面pc

である.

が992より大きいpxが1200より小さいpxが小画面pc

である.

が768より大きいpxが992より小さいpxが平板

である.

768 px未満はモバイル機器

である.
混入を呼び出した.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:30 pxは容器中の両側にそれぞれ15 pxの内辺距離

を示す.
受け継がれた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;
  }
}

主に左右両側-15 pxの外距離とクリアフローティングを追加しました