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