引言
�前不久，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正式版将会发布，我们拭目以待~
网友评论