谈谈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正式版将会发布,我们拭目以待~

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,176评论 1 91
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 158,689评论 24 689
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 9,211评论 3 184
  • 关于亲子的话题,你有什么疑问呢?欢迎提出来,我一会儿专门写一篇文章给你解决
    缨子说心理阅读 76评论 3 0
  • 睡觉的时间到了。眼睛酸涩,刷手机的动作依旧。 在睡觉的闹铃响了三四次后,奶奶坐到我的床头:”你怎么一天盯着手机?“...
    沉默寡言的桃子阅读 114评论 0 0