谈谈Bootstrap栅格系统的发展史

引言

�前不久，Bootstrap 4发布了最后一个alpha版本，距第一个alpha版本已经时隔一年之久，而此次的更新最大的变化就是放弃了对IE9的支持，移除$enable-flex变量，Flexbox被默认启用，所有组件样式栅格系统采用Flexbox布局方式，彻底移除Float布局和清除浮动等特性。一个响应式设计框架的核心无疑是栅格系统，一套布局方式，自适应多个终端，本文就Bootstrap栅格系统的发展史展开进行梳理。

起源

Bootstrap原名Twitter Blueprint，由Mark Otto和Jacob Thornton开发，目的是开发一套可以保持所有页面样式一致性的框架。在Bootstrap出现之前，界面开发通常需要使用不同的库，导致样式不一致和增加维护成本的问题。 作者Mark Otto说：

*“一小组开发人员和我一起设计和开发了一个新的内部工具，并看到了一个机会可以做更多的事情。并且我们看到自己设计的东西比其他人更优秀。几个月之后，我们做出了Bootstrap的原型，在公司内部分享文档、设计模式和资源。” *

经过一个小组几个月之后的努力，Twitter Blueprint改名为Bootstrap，并且在2011年8月19日将其作为开源项目发布。

Bootstrap v1.0.0 —— on Aug 19, 2011

最早的版本，Bootstrap采用了预处理语言LESS模块化开发，此时组件数量并不多，栅格系统针对当时最流行的1024px屏幕而设计，容器宽度为940px，采用16列布局，宽度均为固定值，并加入偏移、清除浮动等特性。

// 栅格系统
.row {
  .clearfix();

  // �默认16列
  .span1     { .columns(1); }
  ...
  .span16    { .columns(16); }

  // �偏移特性
  .offset1   { .offset(1); }
  ...
  .offset12  { .offset(12); }
}

LESS混入

// �列布局
.columns(@columnSpan: 1, @gridColumnWidth: 40px) {
  float: left;
  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
  margin-left: @gridGutterWidth;
  &:first-child {
    margin-left: 0;
  }
}
// 清除浮动
.clearfix {
  zoom: 1;  // IE专属
  &:after {
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
    content: ".";
  }
}

用法

<div class="row">
 <div class="span6">
 ...
 </div>
 <div class="span10">
 ...
 </div>
</div>

Bootstrap v2.0.0 —— on Feb 1, 2012

Bootstrap初步支持响应式网页设计，加入了媒体查询，页面布局可以根据�不同设备（桌面、平板、手机）来进行动态调整，列数量由原先的16列调整为更为合理的12列，并加入流式布局特性。

// 固定布局
#gridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
// 流式布局
#fluidGridSystem > .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth);

LESS混入

// 固定布局
#gridSystem {
  .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
    width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
  }
  ...
} 
// 流式布局
#fluidGridSystem {
  .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
    width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
  } 
  ...
}
// 清除浮动
.clearfix() {
  *zoom: 1; // IE专属
  &:before,
  &:after {
    display: table; // 由原先的block变更为table
    content: "";
  }
  &:after {
    clear: both;
  }
}

用法

// 固定布局
<div class="row">
 ...
</div>
// 流式布局
<div class="row-fluid">
 <div class="span2">
 ...
 </div>
 <div class="span10">
 ...
 </div>
</div>

Bootstrap v3.0.0 —— on Aug 20, 2013

变化最大的一个版本，放弃了对IE7的支持，Bootstrap将移动设备优先作为第一原则，更加强调了响应式设计原则，风格趋于扁平化，容器最大宽度为1366px屏而设计，盒模型box-sizing属性默认为boder-box，栅格系统全面启用百分比浮动流布局，使用媒体查询设定阈值为超小屏幕，小屏幕，中等屏幕，大屏幕创建不同的样式，并加入pull、push列排序特性。

// 行
.row {
  .make-row();
}

// 列
.make-grid(@grid-columns, xs, width);
.make-grid(@grid-columns, xs, pull);
.make-grid(@grid-columns, xs, push);
.make-grid(@grid-columns, xs, offset);

// 小屏幕列
@media (min-width: @screen-sm-min) {
  .make-grid(@grid-columns, sm, width);
  .make-grid(@grid-columns, sm, pull);
  .make-grid(@grid-columns, sm, push);
  .make-grid(@grid-columns, sm, offset);
}

...

LESS混入

.calc-grid(@index, @class, @type) when (@type = width) and (@index > 0) {
  .col-@{class}-@{index} {
    width: percentage((@index / @grid-columns));
  }
}
...
.calc-grid(@index, @class, @type) when (@type = offset) {
  .col-@{class}-offset-@{index} {
    margin-left: percentage((@index / @grid-columns));
  }
}

.make-grid(@index, @class, @type) when (@index >= 0) {
  .calc-grid(@index, @class, @type);
  // �递归
  .make-grid((@index - 1), @class, @type);
}

用法

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Bootstrap v4.0.0-alpha.6(最后一个alpha版本) —— on Jan 6, 2017

预处理语言从LESS切换到SASS，放弃了对IE9的支持，彻底移除Float布局和清除浮动等旧特性，栅格系统全面启用Flexbox布局方式，增加了新类no-gutters(移除槽宽)，容器针对不同分辨率分配不同的内边距，由SASS混入控制不同分辨率宽度下的样式表现。

// 媒体查询�断点
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;
// 构建媒体查询最小阈值
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}
// 构建列
@include media-breakpoint-up($breakpoint, $breakpoints) {
  .col#{$infix} {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  @for $i from 1 through $columns {
    .col#{$infix}-#{$i} {
      @include make-col($i, $columns);
    }
  }
}

用法

<div class="row">
  <div class="col-6 col-lg-3">.col-6 .col-lg-3</div>
  <div class="col-6 col-lg-3">.col-6 .col-lg-3</div>
  <div class="col-6 col-lg-3">.col-6 .col-lg-3</div>
  <div class="col-6 col-lg-3">.col-6 .col-lg-3</div>
</div>
<div class="row no-gutters">
  <div class="col-3">.col-6</div>
  <div class="col-6">.col-6</div>
  <div class="col-auto">.col-auto</div>
</div>

结尾

总的来说，Bootstrap的栅格系统越来越精妙，从预处理器代码结构组织上，变量可配置项，项目工程化角度，用户使用角度，做的越来越好，也逐渐放下了浏览器兼容性方面的历史包袱，专注于现代化Web开发，相信不久后，Bootstrap 4正式版将会发布，我们拭目以待~