文 / 李壯相    技術(shù)總監(jiān)

一、什么是BootStrap

在蘋果推出視網(wǎng)膜屏幕的iPhone的時(shí)候，全世界的人都震驚了，其細(xì)膩的顯示表達(dá)能力，打開了一個(gè)新的視覺世界，并開始被競(jìng)爭(zhēng)對(duì)手效仿。然而很快人們就發(fā)現(xiàn)問題，微軟強(qiáng)大的兼容能力造就了大量的屏幕分辨率極度不統(tǒng)一，蘋果產(chǎn)品一家獨(dú)秀，想模仿不是一件簡(jiǎn)單的事。于是微軟想出了一個(gè)辦法，就是Metro風(fēng)格，并在Windows8得以展示。這樣醒目簡(jiǎn)單塊狀的家伙，完全消除了不同的分辨率的障礙。于是三大陣營(yíng)統(tǒng)一思路，Android、iOS 、WP，逐步消除擬物化的顯示效果，大大小小的手機(jī)開始大行其道，滿足了不同分辨率的能力。這是一種積木式的簡(jiǎn)樸思想的大獲成功。

然而成熟的B/S架構(gòu)除了宣布支持HTML5，在手機(jī)、PC上的展示能力外，總是捉襟見肘。所幸的是來自Twitter的兩個(gè)工程師Mark Otto和Jacob Thornton搗鼓了一個(gè)叫BootStrap的前端開發(fā)的開源工具。其思想和積木式的如出一轍。

 BootStrap按官方的說法有三個(gè)特性說明：

A、預(yù)處理腳本

雖然可以直接使用 BootStrap 提供的 CSS 樣式表，但不要忘記 BootStrap 的源碼是基于最流行的 CSS 預(yù)處理腳本 —— Less 和 Sass 開發(fā)的。

B、一個(gè)框架、多種設(shè)備

你的網(wǎng)站和應(yīng)用能在 BootStrap 的幫助下通過同一份代碼快速、有效地適配手機(jī)、平板、PC 設(shè)備，這一切都是 CSS 媒體查詢（Media Query）的功勞。

C、特性齊全

BootStrap 提供了全面、美觀的文檔。你能在這里找到關(guān)于 HTML 元素、HTML 和 CSS 組件、jQuery 插件方面的所有詳細(xì)文檔。

二、為啥說它就干一件事

雖然BootStrap說，它干了這三件事，但是我認(rèn)為，它其實(shí)只干了一件事，就是積木！BootStrap用一個(gè)專業(yè)的名稱叫柵格系統(tǒng)(Grid System)。

BootStrap 柵格系統(tǒng)（Grid System）提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)。隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。

這些數(shù)字的值就是其分配的寬度的值，最大12，最小1，各種混搭。

這樣就把一個(gè)網(wǎng)頁的布局全部弄清楚了。剩余的工作就比較簡(jiǎn)單了，為了配合布局，它把按鈕、表格、縮略圖、標(biāo)簽、氣泡、下拉菜單、導(dǎo)航條、警告提示、進(jìn)度條、列表組合、面板、輪播等重新加工處理了一遍，以滿足外部容器的需要。

當(dāng)然如果您認(rèn)為事件就這么簡(jiǎn)單了，那還是小看了BootStrap，它還能夠在一個(gè)頁面里面直接說明不同的布局才是其強(qiáng)大之處。

在CSS上:

這事實(shí)上已經(jīng)說明3中分辨率不同的布局風(fēng)格，刪格系統(tǒng)的定義如下[注]:

這樣，一個(gè)能夠滿足不同分辨率的簡(jiǎn)潔、直觀、強(qiáng)悍的前端開發(fā)框架被構(gòu)建出來了，讓web開發(fā)更迅速、簡(jiǎn)單。

那么另外，Less和Sass又是何種用途呢？它們的作用是能夠讓BootStrap的CSS變得更加簡(jiǎn)潔統(tǒng)一，以便于積木整個(gè)風(fēng)格的調(diào)整。Less將CSS賦予了動(dòng)態(tài)語言的特性，如變量、繼承、運(yùn)算、函數(shù)等，而Sass富于更加廣泛的循環(huán)遍歷CSS的運(yùn)算能力，也是柵格系統(tǒng)得以發(fā)揮的基礎(chǔ)，未來是否均整合到Sass中，我們尚不得而知。簡(jiǎn)單的講，就是不要刻意研究Less和Sass，它們?yōu)锽ootStrap的柵格系統(tǒng)起到了重要的作用。但是都是為BootStrap干的這一件事。

從這里面我們得到的啟發(fā)是，我們把很多事情想象得太復(fù)雜了，BootStrap用一個(gè)簡(jiǎn)單的積木方式和簡(jiǎn)單的表達(dá)能力，把前端開發(fā)框架重新構(gòu)建了一下，獲得了整個(gè)互聯(lián)網(wǎng)的稱贊。這樣您弄懂了嗎？

[注]表格來自網(wǎng)頁：http://v3.bootcss.com/css/