【新東網(wǎng)技術(shù)大咖帶您走進BootStrap】其實BootStrap就干一件事
發(fā)布時間： 2016-08-12 09:58:41
文 / 李壯相 技術(shù)總監(jiān)
新東網(wǎng)自2001年成立以來，掌握大數(shù)據(jù)、云計算、通信、物聯(lián)網(wǎng)及區(qū)塊鏈等領(lǐng)先信息技術(shù)，擁有一支逾16年經(jīng)驗的強大IT團隊。為沉淀企業(yè)技術(shù)實力，繼續(xù)發(fā)揮行業(yè)優(yōu)勢，《東網(wǎng)快訊》特邀新東網(wǎng)技術(shù)大咖帶您走進這些先進信息技術(shù)，揭秘新東網(wǎng)16年來的技術(shù)成果，每周五發(fā)布。
新東網(wǎng)技術(shù)內(nèi)幕大揭秘開始啦~首篇帶您走進BootStrap，看看BootStrap究竟干了什么事？
一、什么是BootStrap
在蘋果推出視網(wǎng)膜屏幕的iPhone的時候，全世界的人都震驚了，其細膩的顯示表達能力，打開了一個新的視覺世界，并開始被競爭對手效仿。然而很快人們就發(fā)現(xiàn)問題，微軟強大的兼容能力造就了大量的屏幕分辨率極度不統(tǒng)一，蘋果產(chǎn)品一家獨秀，想模仿不是一件簡單的事。于是微軟想出了一個辦法，就是Metro風(fēng)格，并在Windows8得以展示。這樣醒目簡單塊狀的家伙，完全消除了不同的分辨率的障礙。于是三大陣營統(tǒng)一思路，Android、iOS 、WP，逐步消除擬物化的顯示效果，大大小小的手機開始大行其道，滿足了不同分辨率的能力。這是一種積木式的簡樸思想的大獲成功。
然而成熟的B/S架構(gòu)除了宣布支持HTML5，在手機、PC上的展示能力外，總是捉襟見肘。所幸的是來自Twitter的兩個工程師Mark Otto和Jacob Thornton搗鼓了一個叫BootStrap的前端開發(fā)的開源工具。其思想和積木式的如出一轍。
BootStrap按官方的說法有三個特性說明：
A、預(yù)處理腳本
雖然可以直接使用 BootStrap 提供的 CSS 樣式表，但不要忘記 BootStrap 的源碼是基于最流行的 CSS 預(yù)處理腳本 —— Less 和 Sass 開發(fā)的。
B、一個框架、多種設(shè)備
你的網(wǎng)站和應(yīng)用能在 BootStrap 的幫助下通過同一份代碼快速、有效地適配手機、平板、PC 設(shè)備，這一切都是 CSS 媒體查詢（Media Query）的功勞。
C、特性齊全
BootStrap 提供了全面、美觀的文檔。你能在這里找到關(guān)于 HTML 元素、HTML 和 CSS 組件、jQuery 插件方面的所有詳細文檔。
二、為啥說它就干一件事
雖然BootStrap說，它干了這三件事，但是我認為，它其實只干了一件事，就是積木！BootStrap用一個專業(yè)的名稱叫柵格系統(tǒng)(Grid System)。
BootStrap 柵格系統(tǒng)（Grid System）提供了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)。隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。
這些數(shù)字的值就是其分配的寬度的值，最大12，最小1，各種混搭。
這樣就把一個網(wǎng)頁的布局全部弄清楚了。剩余的工作就比較簡單了，為了配合布局，它把按鈕、表格、縮略圖、標(biāo)簽、氣泡、下拉菜單、導(dǎo)航條、警告提示、進度條、列表組合、面板、輪播等重新加工處理了一遍，以滿足外部容器的需要。
當(dāng)然如果您認為事件就這么簡單了，那還是小看了BootStrap，它還能夠在一個頁面里面直接說明不同的布局才是其強大之處。
在CSS上:
|
...
...
|
這事實上已經(jīng)說明3中分辨率不同的布局風(fēng)格，刪格系統(tǒng)的定義如下[注]:
|
超小屏幕 |
小屏幕 |
中等屏幕 |
大屏幕 |
|
|
手機 (<768px) |
平板 (≥768px) |
桌面顯示器 (≥992px) |
大桌面顯示器 (≥1200px) |
|
|
柵格系統(tǒng)行為 |
總是水平排列 |
開始是堆疊在一起的，當(dāng)大于這些閾值時將變?yōu)樗脚帕蠧 |
||
|
.container 最大寬度 |
None （自動） |
750px |
970px |
1170px |
|
類前綴 |
.col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
|
列（column）數(shù) |
12 |
|||
|
最大列（column）寬 |
自動 |
~62px |
~81px |
~97px |
|
槽（gutter）寬 |
30px （每列左右均有 15px） |
|||
|
可嵌套 |
是 |
|||
|
偏移（Offsets） |
是 |
|||
|
列排序 |
是 |
|||
這樣，一個能夠滿足不同分辨率的簡潔、直觀、強悍的前端開發(fā)框架被構(gòu)建出來了，讓web開發(fā)更迅速、簡單。
那么另外，Less和Sass又是何種用途呢？它們的作用是能夠讓BootStrap的CSS變得更加簡潔統(tǒng)一，以便于積木整個風(fēng)格的調(diào)整。Less將CSS賦予了動態(tài)語言的特性，如變量、繼承、運算、函數(shù)等，而Sass富于更加廣泛的循環(huán)遍歷CSS的運算能力，也是柵格系統(tǒng)得以發(fā)揮的基礎(chǔ)，未來是否均整合到Sass中，我們尚不得而知。簡單的講，就是不要刻意研究Less和Sass，它們?yōu)锽ootStrap的柵格系統(tǒng)起到了重要的作用。但是都是為BootStrap干的這一件事。
從這里面我們得到的啟發(fā)是，我們把很多事情想象得太復(fù)雜了，BootStrap用一個簡單的積木方式和簡單的表達能力，把前端開發(fā)框架重新構(gòu)建了一下，獲得了整個互聯(lián)網(wǎng)的稱贊。這樣您弄懂了嗎？
[注]表格來自網(wǎng)頁：http://v3.bootcss.com/css/
閩公網(wǎng)安備 35010202001006號