bootstrap4源碼閱讀體會

歡迎到我的博客參觀: 點擊這裏

bootstrap已經使用了很長時間，可是歷來沒有好好研究過其設計結構，春節期間閒來無事就閱讀了源碼。經過閱讀發現了很多知識的盲點和誤解，對css有了更深刻的理解。總結幾點印象較深的體會，分享給你們。

1. 移動優先

在移動互聯網時代，不少公司都堅持移動端優先的原則，bootstrap也迎合了這種需求，具體表如今以下方面:

• 相對單位: %、rem的大量使用

• grid系統: 爲了使用不一樣的設備，grid系統對xs、sm、md、lg、xl進行了響應式設計，經過media query作到適配

• 支持flexbox: mobile應該很快就可使用flexbox

2. 代碼結構

2.1 從less到saas

使用sass做爲bootstrap的css預處理器，之前對預處理器不是很感冒，認爲將簡單問題複雜化了。可是經過閱讀源碼改變了這種認識:

• css模塊化: css很簡單、靈活，這是其優勢，同時也是一個缺點。經過sass預處理器，能夠根據功能將css模塊化，便於css的管理

• 複用: 變量、mixin、function等技術，能夠方便地進行代碼複用

• 簡潔: 支持each、if等語法，動態輸出內容，例如繁瑣的grid系統，是經過少許的sass代碼作到的

2.2 代碼層次

根據代碼的層次，sass的源碼分爲以下幾部分:

• 支撐部分: 包括變量定義、大量的mixin文件，這是整個bootstrap的基礎代碼，也是進行個性化定製的其實位置

• 全局部分: normalize.scss用於覆蓋各類瀏覽器的默認行爲，保證起始樣式的一致性

• 基礎樣式部分: 包含了reboot、typography、images、code、table、forms、buttons等，主要是一些經常使用的基礎html元素

• grid部分: 選擇性支持flexbox，默認狀況下是關閉的，只要將$enable-flex=true就可使用flexbox完成頁面的柵格佈局

• 組件部分: 包含大量經常使用的基礎組件，有些須要添加jQuery plugin

• 工具類部分: 經常使用的簡單樣式，例如間距、文本對齊、字體加粗等

3. Grid

Grid用於頁面的總體佈局，同時css3也在起草grid佈局模塊。Grid也能夠單獨使用，bootstrap4提供了一個單獨的文件(bootstrap-grid.scss)來實現柵格系統，具體來講Grid有以下特色:

• 默認狀況下是12柵格

• 柵格能夠嵌套使用

• 支持5種尺寸下的響應式樣式

• 5個尺寸能夠組合使用，適配不一樣終端下終端

• 支持使用flexbox

4. flexbox

flexbox目前還處於草案階段，不太高級瀏覽器已經開始支持，若是隻考慮高版本瀏覽器的話，能夠啓動經過$enable-flex=true來啓動flexbox。

flexbox是將來佈局的趨勢，尤爲是在複雜頁面佈局上，總得來講具備以下幾個優勢:

• 可伸縮性: 經過flex來實現空間的伸縮，在響應式設計中更加靈活(無需關注margin、padding、border等)

• 順序定製: flexbox的一大亮點，經過order指定元素的顯示順序

• 輕鬆對齊: 經過jsutify-content、align-items能夠方便實現元素的對齊

• 方向性: 經過flex-flow方便肯定佈局的方向

5. 組件設計

bootstrap裏面提供了大量的經常使用組件，能夠直接使用或者簡單進行二次開發，加快平常業務的開發速度。同時，有些組件須要跟js(jQuery)配合，實現組件的交互效果。

裏面的組件按是否須要js，能夠分爲兩類:

• 無需js配合: Button系列、Form、Input系列、DropDown、Jumbotron、Label、Alert、Cards、Nav系列、Breadcrumb、Pagination、Progress、List

• 需js配合: Modal、Tooltips、Popovers、Carousels

須要注意的是Cards是bootstrap4新增的組件。

6. 參考

• http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/