引言

?前不久，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正式版將會發布，我們拭目以待~