Bootstrap 4-alpha 初體驗

What is Bootstrap？

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

 

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

 

Installation

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

1. 最最簡單粗暴的方式：
1. 直接下載下來使用
2. 地址：https://github.com/twbs/bootstrap/archive/v4.0.0-alpha.zip 順便罵句街：最近上網又很困難了，可能是不太平，所以下載不下來也很正常；

2. Git
1. 首先確保機器上安裝了GIT，確保終端中有git命令：
1. windows用戶安裝http://git-scm.com/download/win 並配置環境變量；osx直接略過；
2. 打開終端或者命令行工具鍵入以下命令：
1. git clone -b v4-dev https://github.com/twbs/bootstrap.git
2. -b參數是指定一個分支，由於現在還沒有切換到主分支上，所以需要手動指定一下
3. 網絡不給力fuck，但願9月3號過后可以好點
3. Bower（推薦）
1. 前端專業加包或者叫依賴管理工具，類似與NuGet或是maven，它本身是Node的一個包，所以需要提前安裝一下Node，這里不多介紹了，官網有詳細說明 http://bower.io
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監視源碼的變化自動編譯；

 

小結

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