bootstrap4源碼閱讀體會

bootstrap使用了很長時間，是頁面快速開發的一把利器。最近，bootstrap4馬上呼之欲出，春節閑來無事，就從源碼層面解讀下。

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/