引言
?前不久，Bootstrap 4發(fā)布了最后一個(gè)alpha版本，距第一個(gè)alpha版本已經(jīng)時(shí)隔一年之久胚宦，而此次的更新最大的變化就是放棄了對(duì)IE9的支持轨奄，移除$enable-flex變量，F(xiàn)lexbox被默認(rèn)啟用腾啥，所有組件樣式柵格系統(tǒng)采用Flexbox布局方式，徹底移除Float布局和清除浮動(dòng)等特性。一個(gè)響應(yīng)式設(shè)計(jì)框架的核心無(wú)疑是柵格系統(tǒng)囱怕，一套布局方式霍弹，自適應(yīng)多個(gè)終端，本文就Bootstrap柵格系統(tǒng)的發(fā)展史展開進(jìn)行梳理娃弓。
起源
Bootstrap原名Twitter Blueprint典格，由Mark Otto和Jacob Thornton開發(fā)，目的是開發(fā)一套可以保持所有頁(yè)面樣式一致性的框架台丛。在Bootstrap出現(xiàn)之前耍缴，界面開發(fā)通常需要使用不同的庫(kù)，導(dǎo)致樣式不一致和增加維護(hù)成本的問(wèn)題挽霉。 作者M(jìn)ark Otto說(shuō)：
*“一小組開發(fā)人員和我一起設(shè)計(jì)和開發(fā)了一個(gè)新的內(nèi)部工具防嗡，并看到了一個(gè)機(jī)會(huì)可以做更多的事情。并且我們看到自己設(shè)計(jì)的東西比其他人更優(yōu)秀炼吴。幾個(gè)月之后本鸣，我們做出了Bootstrap的原型，在公司內(nèi)部分享文檔硅蹦、設(shè)計(jì)模式和資源荣德。” *
經(jīng)過(guò)一個(gè)小組幾個(gè)月之后的努力童芹，Twitter Blueprint改名為Bootstrap涮瞻，并且在2011年8月19日將其作為開源項(xiàng)目發(fā)布。
Bootstrap v1.0.0 —— on Aug 19, 2011
最早的版本假褪，Bootstrap采用了預(yù)處理語(yǔ)言LESS模塊化開發(fā)署咽，此時(shí)組件數(shù)量并不多，柵格系統(tǒng)針對(duì)當(dāng)時(shí)最流行的1024px屏幕而設(shè)計(jì)生音，容器寬度為940px宁否，采用16列布局，寬度均為固定值缀遍，并加入偏移慕匠、清除浮動(dòng)等特性。
// 柵格系統(tǒng)
.row {
.clearfix();
// ?默認(rèn)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;
}
}
// 清除浮動(dòng)
.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初步支持響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)域醇，加入了媒體查詢台谊，頁(yè)面布局可以根據(jù)?不同設(shè)備（桌面、平板譬挚、手機(jī)）來(lái)進(jìn)行動(dòng)態(tài)調(diào)整锅铅，列數(shù)量由原先的16列調(diào)整為更為合理的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));
}
...
}
// 清除浮動(dòng)
.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
變化最大的一個(gè)版本盐须，放棄了對(duì)IE7的支持，Bootstrap將移動(dòng)設(shè)備優(yōu)先作為第一原則漆腌，更加強(qiáng)調(diào)了響應(yīng)式設(shè)計(jì)原則丰歌，風(fēng)格趨于扁平化姨蟋，容器最大寬度為1366px屏而設(shè)計(jì)，盒模型box-sizing屬性默認(rèn)為boder-box立帖，柵格系統(tǒng)全面啟用百分比浮動(dòng)流布局，使用媒體查詢?cè)O(shè)定閾值為超小屏幕悠砚，小屏幕晓勇，中等屏幕，大屏幕創(chuàng)建不同的樣式灌旧，并加入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(最后一個(gè)alpha版本) —— on Jan 6, 2017
預(yù)處理語(yǔ)言從LESS切換到SASS枢泰，放棄了對(duì)IE9的支持描融，徹底移除Float布局和清除浮動(dòng)等舊特性，柵格系統(tǒng)全面啟用Flexbox布局方式衡蚂，增加了新類no-gutters(移除槽寬)窿克，容器針對(duì)不同分辨率分配不同的內(nèi)邊距，由SASS混入控制不同分辨率寬度下的樣式表現(xiàn)毛甲。
// 媒體查詢?斷點(diǎn)
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
// 構(gòu)建媒體查詢最小閾值
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
@if $min {
@media (min-width: $min) {
@content;
}
} @else {
@content;
}
}
// 構(gòu)建列
@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>
結(jié)尾
總的來(lái)說(shuō)年叮，Bootstrap的柵格系統(tǒng)越來(lái)越精妙，從預(yù)處理器代碼結(jié)構(gòu)組織上玻募，變量可配置項(xiàng)只损，項(xiàng)目工程化角度，用戶使用角度七咧，做的越來(lái)越好跃惫，也逐漸放下了瀏覽器兼容性方面的歷史包袱，專注于現(xiàn)代化Web開發(fā)艾栋，相信不久后爆存，Bootstrap 4正式版將會(huì)發(fā)布，我們拭目以待~
