转载

Bootstrap Less mixin 和变量

Less mixin 和变量

除了用于快速布局的预定义栅格类，Bootstrap 还包含了一组 Less 变量和 mixin 用于帮你生成简单、语义化的布局。

变量

通过变量来定义列数、槽（gutter）宽、媒体查询阈值（用于确定合适让列浮动）。我们使用这些变量生成预定义的栅格类，如上所示，还有如下所示的定制 mixin。

@grid-columns:              12;

@grid-gutter-width:         30px;

@grid-float-breakpoint:     768px;

mixin

mixin 用来和栅格变量一同使用，为每个列（column）生成语义化的 CSS 代码。

// Creates a wrapper for a series of columns

.make-row(@gutter: @grid-gutter-width) {

  // Then clear the floated columns

  .clearfix();

  @media (min-width: @screen-sm-min) {

    margin-left:  (@gutter / -2);

    margin-right: (@gutter / -2);

  }

  // Negative margin nested rows out to align the content of columns

  .row {

    margin-left:  (@gutter / -2);

    margin-right: (@gutter / -2);

  }

}

// Generate the extra small columns

.make-xs-column(@columns; @gutter: @grid-gutter-width) {

  position: relative;

  // Prevent columns from collapsing when empty

  min-height: 1px;

  // Inner gutter via padding

  padding-left:  (@gutter / 2);

  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available

  @media (min-width: @grid-float-breakpoint) {

    float: left;

    width: percentage((@columns / @grid-columns));

  }

}

// Generate the small columns

.make-sm-column(@columns; @gutter: @grid-gutter-width) {

  position: relative;

  // Prevent columns from collapsing when empty

  min-height: 1px;

  // Inner gutter via padding

  padding-left:  (@gutter / 2);

  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available

  @media (min-width: @screen-sm-min) {

    float: left;

    width: percentage((@columns / @grid-columns));

  }

}

// Generate the small column offsets

.make-sm-column-offset(@columns) {

  @media (min-width: @screen-sm-min) {

    margin-left: percentage((@columns / @grid-columns));

  }

}

.make-sm-column-push(@columns) {

  @media (min-width: @screen-sm-min) {

    left: percentage((@columns / @grid-columns));

  }

}

.make-sm-column-pull(@columns) {

  @media (min-width: @screen-sm-min) {

    right: percentage((@columns / @grid-columns));

  }

}

// Generate the medium columns

.make-md-column(@columns; @gutter: @grid-gutter-width) {

  position: relative;

  // Prevent columns from collapsing when empty

  min-height: 1px;

  // Inner gutter via padding

  padding-left:  (@gutter / 2);

  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available

  @media (min-width: @screen-md-min) {

    float: left;

    width: percentage((@columns / @grid-columns));

  }

}

// Generate the medium column offsets

.make-md-column-offset(@columns) {

  @media (min-width: @screen-md-min) {

    margin-left: percentage((@columns / @grid-columns));

  }

}

.make-md-column-push(@columns) {

  @media (min-width: @screen-md-min) {

    left: percentage((@columns / @grid-columns));

  }

}

.make-md-column-pull(@columns) {

  @media (min-width: @screen-md-min) {

    right: percentage((@columns / @grid-columns));

  }

}

// Generate the large columns

.make-lg-column(@columns; @gutter: @grid-gutter-width) {

  position: relative;

  // Prevent columns from collapsing when empty

  min-height: 1px;

  // Inner gutter via padding

  padding-left:  (@gutter / 2);

  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available

  @media (min-width: @screen-lg-min) {

    float: left;

    width: percentage((@columns / @grid-columns));

  }

}

// Generate the large column offsets

.make-lg-column-offset(@columns) {

  @media (min-width: @screen-lg-min) {

    margin-left: percentage((@columns / @grid-columns));

  }

}

.make-lg-column-push(@columns) {

  @media (min-width: @screen-lg-min) {

    left: percentage((@columns / @grid-columns));

  }

}

.make-lg-column-pull(@columns) {

  @media (min-width: @screen-lg-min) {

    right: percentage((@columns / @grid-columns));

  }

}

实例展示

你可以重新修改这些变量的值，或者用默认值调用这些 mixin。下面就是一个利用默认设置生成两列布局（列之间有间隔）的案例。

one:

.wrapper {

  .make-row();

}

.content-main {

  .make-lg-column(8);

}

.content-secondary {

  .make-lg-column(3);

  .make-lg-column-offset(1);

}