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

一、什么是BootStrap

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

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

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

A、預處理腳本

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

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

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

C、特性齊全

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

二、為啥說(shuō)它就干一件事

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

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

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

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

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

在CSS上:

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

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

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

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

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