前端框架Bootstrap 栅格系统的发展史

起源

Bootstrap原名Twitter Blueprint，由Mark Otto和Jacob Thornton开发，目的是开发一套可以保持所有页面样式一致性的框架。在Bootstrap出现之前，界面开发通常需要使用不同的库，导致样式不一致和增加维护成本的问题。 作者Mark Otto说：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3275.html

“一小组开发人员和我一起设计和开发了一个新的内部工具，并看到了一个机会可以做更多的事情。并且我们看到自己设计的东西比其他人更优秀。几个月之后，我们做出了Bootstrap的原型，在公司内部分享文档、设计模式和资源。”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3275.html

经过一个小组几个月之后的努力，Twitter Blueprint改名为Bootstrap，并且在2011年8月19日将其作为开源项目发布。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3275.html

Bootstrap v1.0.0 —— on Aug 19, 2011

最早的版本，Bootstrap采用了预处理语言LESS模块化开发，此时组件数量并不多，栅格系统针对当时最流行的1024px屏幕而设计，容器宽度为940px，采用16列布局，宽度均为固定值，并加入偏移、清除浮动等特性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3275.html

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

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

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

LESS混入文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3275.html

// 列布局
.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: ".";
  }
}

用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3275.html

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

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3275.html

Bootstrap v2.0.0 —— on Feb 1, 2012

Bootstrap初步支持响应式网页设计，加入了媒体查询，页面布局可以根据不同设备（桌面、平板、手机）来进行动态调整，列数量由原先的16列调整为更为合理的12列，并加入流式布局特性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3275.html

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

LESS混入文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3275.html

// 固定布局
#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;
  }
}

用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3275.html

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

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3275.html

Bootstrap v3.0.0 —— on Aug 20, 2013

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

// 行
.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混入文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3275.html

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

用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3275.html

<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>

" data-original-src="http://upload-images.jianshu.io/upload_images/4145295-c49a5f525e36d995.png?imageMogr2/auto-orient/strip%7CimageView2/2" data-data-original="https://user-gold-cdn.xitu.io/2017/1/16/7ff77df111b70e80c542e372edcb9043?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" src="https://www.cainiaoxueyuan.com/wp-content/themes/begin/img/loading.png"height="20" data-width="800" data-height="600" />文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3275.html

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

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

// 媒体查询断点
$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);
    }
  }
}

用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3275.html

<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>

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3275.html

结尾

总的来说，Bootstrap的栅格系统越来越精妙，从预处理器代码结构组织上，变量可配置项，项目工程化角度，用户使用角度，做的越来越好，也逐渐放下了浏览器兼容性方面的历史包袱，专注于现代化Web开发。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3275.html