What is Bootstrap？

第一句話就是廢話了，作為新時代有理想有節操的開發人員無人不知無人不曉。可能就是熟悉程度因為各種原因不盡相同，有人只是知道他大概是個什麼東西，有些人可能基本可以使用，有些人可能深有體會。但是糾正一下一個比較常見的問題，可能我這個人比較矯情，Bootstrap是一個單詞，不要寫成了BootStrap，還有重音在第一個字母http://fanyi.baidu.com/#en/zh/bootstrap，尊重作者。

Bootstrap是新時代Web開發前端展示整體的解決方案，也可以說是框架，以模組化元件化(也可以說是OOP)的編碼方式給了傳統的網頁開發人員一記響亮的耳光。讓大家開始注重前端的架構和工作流，注重網頁再也不是懟程式碼實現效果就完事了。說白了就是：我們需要實現最終的效果（否則老闆那裡說不過去），只是在這個實現的過程中體現的更優（zhuang）雅（bi）一些。當然這些所謂的優雅並不是一味的提高B格，顯得與眾不同，而真的是時代需要。扯遠了，今天小有點時間，一起來看看前幾天剛釋出的Bootstrap-v4-alpha版。

Installation

對於前端的包安裝的方法各式各樣，這裡簡單提一下：

2. Git
1. 首先確保機器上安裝了GIT，確保終端中有git命令：
1. windows使用者安裝http://git-scm.com/download/win 並配置環境變數；osx直接略過；
2. 開啟終端或者命令列工具鍵入以下命令：
1. -b引數是指定一個分支，由於現在還沒有切換到主分支上，所以需要手動指定一下
2. 網路不給力fuck，但願9月3號過後可以好點
3. Bower（推薦）
1. 前端專業加包或者叫依賴管理工具，類似與NuGet或是maven，它本身是Node的一個包，所以需要提前安裝一下
2.  在全域性環境中安裝完Bower後開啟終端或命令列鍵入：
1. bower install bootstrap#4.0.0-alpha
2. 這裡注意#4.0.0-alpha是必須的，預設是當前最新的正式版本3.3
3. 

Features

1. 原始碼從Less變為了Sass：
1. 這點沒什麼好說的，之前3.x的時期已經有Sass的版本，不可否認Sass越來越流行。前端行業重複造輪子的情況是很普遍的，呼籲儘量不要重複造輪子，用別人的輪子沒什麼可恥的，可恥的是把別人的輪子拿過來改改就造一個新輪子。感覺上大家都在造輪子讓生態圈錚錚向榮，但是也會讓初學者茫然，比如像選一個任務框架，用grunt還是用gulp？
2. 可深度自定義：
1. 在3.x中我們就可以通過修改專案中的variables.less檔案去自定義，比如原本的12列Grid很多人都覺得不夠，那我們就可通以過@grid-columns:變數去修改。
2. 在4.0中這一點更突出，可以自定義元件的各種樣式，比如是否有陰影圓角或是漸變效果、是否使用flexbox等等，也是通過專案中_variables.scss中定義。
3. 

3. FlexBox：
1. FlexBox為CSS提供了一個更簡單便捷的佈局方式，取代咱們之前在CSS中常見的float，display:table的方式，這麼牛掰的功能自然不支援IE10以下版本，只不過以後也就不存在這個問題，也可以說微軟間接成就了前端大行其道的現狀，哈哈！關於FlexBox：
2. 傳送門：http://www.w3cplus.com/css3/a-guide-to-flexbox.html
3. 不重複造輪子（其實我也是不太熟悉這個）
4. 全面使用rem：
1. 這是一個長度單位，在之前的版本一直沒有使用過，跟em類似，em單位是相對當前容器的font-size，一個單位的em=當前容器定義的字型大小，常見案例：中文段落首行兩個單位的縮排，2em搞定。
2. 而rem是相對於根容器font-size來確定的，rem應該就是root em簡寫（不確定），如果整個網頁都是通過rem的單位設定尺寸，只要在跟容器（body）設定一個具體的font-size為畫素單位，而且當這個畫素值變化整個頁面所有用到rem的地方都會等比例變化，便於維護。
3. 相關連結：http://www.w3cplus.com/css3/define-font-size-with-css3-rem
5. 放棄IE8的支援，也就是以後只相容IE8以上。從產品角度可以理解，個人情感：完全放棄IE吧。
6. 重構了JS元件，功能上沒有變化；
7. 將wells、thumbnails和panels統一改為cards；
8. 樣式上細微變化；
9. 。。。。。。。待續

Usage

今天關於Bootstrap使用肯定沒時間鋪開來說了，這裡簡單介紹一下他的專案結構和編譯（原始碼是Scss編寫，而且是單獨元件的方式編寫），現在還沒有單獨發行編譯過後的包，所以難免需要我們手動編譯，很簡單：

Compilation

1. 先定位到Bootstrap所在的目錄：

2. 鍵入：
1. npm install 回車
2. Node 的包管理工具會根據配置檔案自動安裝編譯所需要用到的包 ，國內使用者可以通過淘寶的cnpm加速此過程

3. 鍵入：
1. grunt 回車

4. 專案目錄下的dist中為編譯過後的結果；
5. 也可以使用grunt watch監視原始碼的變化自動編譯；

小結

現在這個時代思想保守，技術守舊的產品自然是最早離開我們的，那開發人員呢？也不是說為了不被淘汰就去追新技術，最起碼在思想上要要求自己進步，抓得住技術方向的靈魂。鄙人不才，想拋磚引玉，希望部落格園的各位大神多關注前端方向新動態，多多發表個人想法，促進國內前端生態圈