開發工程師, 使用Bootstrap.前端開發人員, 使用Foundation . 我們來談談為什麼.
Bootstrap 與Foundation 有許多關鍵的區別, 但是, 我想你只需要記住一件事:
ZURB 和Twitter 的兩種設計理念是很清楚的, 從他們對自己的框架的命名就可以看出來: Bootstrap 有引導, 開機自舉的意思, 換言之, 它嘗試處理你項目中一切所需要的. 而Foundation 有創建, 創造的意思, 換言之, 它僅僅給你項目中強有力的創造力.
保持這種看法, 現在我來列出兩者之間更多的關鍵區別:
1. UI 元素
Foundation 只安排了有限的幾種元素, Bootstrap 則給你了所有你可以想像到的一切元素.
ZURB 對於Foundation 的設計目標是, 縱然你使用預定義的UI 元素, 也不應該與大家的網站長的太像.
而另一邊, Bootstrap 則試圖給你提供所有定義好的UI 元素.
2. REMs VS Pixels
Foundation 使用REMs, 而Bootstrap 使用Pixels .
使用Pixels 意味著你不得不准確定義一個組件的高, 寬, 內邊距, 外邊距, 而且在每一種設備與屏幕尺寸上, 因為不同的設備往往顯示效果區別很大.
現在Foundation 5 使用REMs, 而不是EM. 這樣, 避免了EM cascade 問題.
使用REMs 意味著你可以直接用font-size: 80%; 就可以讓整個組件和它的子組件縮小20%.
值得說明的是, 通過REMs, 你可以脫離Pixels 的細節了, 所以, 使用REMs 來處理是非常值得的.
Foundation 還提供了sass 的mixin 方法來將Pixels 轉換為REMs, 這樣, 你還可以繼續使用Pixels 的思考方式來定義頁面:
.element { width: rem-calc(10px); // will be converted to REMs}3. 靈活的網格VS 預定義的網格
Foundation 的網格可以自動適配當前瀏覽器的寬度. Boostrap 則是預定義了幾種網格尺寸來適配主流的設備和屏幕.
Bootstrap 會在你改變瀏覽器寬度的時候突然改變它的網格.
Foundation 則會靈活適配當前的瀏覽器寬度, 這是一種新的技術手段, 自動適配的同時, 可以表現的與Transformer 一樣的效果.
Foundation 當網格改變時有兩個要點: 小, 中和大. 所有的操作都只有縮小和放大, 並適應於當前瀏覽器的寬度. 不需要預定義的屏幕大小, 並且更主要的原因是, 鼓勵你去根據屏幕的大小來定義不同的樣式.
使用Bootstrap, 你得到一個固定的或者說流形的網格, 這意味著你需要分別設定或者說對於網格容器不是一個預定義好的寬度.
使用Foundation 和Sass, 你可以自由調整最大的網格的大小( 中型的和小型的自動被計算), 大屏幕的列數, 小屏幕的列數.
4. 移動設備優先VS 也支持移動設備
Foundation 設計時已經考慮了任何四角屏幕. 而Bootstrap 設計時則預先分為: 手機, 平板, 台式機和超大屏幕的台式機.
構建一個優先支持移動設備的網站意味著它肯定在更大的屏幕上是可用的. 所以, Foundation 鼓勵你這樣去做: 移動優先.
如果你使用Foundation 的Sass Media Query Mixin, 你就會發現, 沒有特定的Media Query 來查詢什麼是移動設備, 而是你使用Media Query 來定義在更大的屏幕下應該怎麼顯示.
設計東西時先考慮台式機的話很可能在支持更小屏幕時遇到很大問題, 和先考慮手機的話, 將會讓你專注於什麼是對用戶最重要的, 讓你空間提用感上升.
5. 社區
Bootstrap 有一個更大的社區. 而使用Foundation 你就不得不自力更生一些.
Bootstrap 非常大的亮點就是社區. 這是一個非常巨大, 包羅萬象, 幾乎找啥都可以找到.
如果你選擇了Foundation, 自力更生可能就是你不得不掌握的了. 幾乎所有的解決方法都是為Bootstrap 的, 你只能自己再去構建自己的.
結論
問你自己幾個問題:
你想讓某個東西更加易用或者讓它更俱生活氣息?
你想組織自己的CSS, 只是讓它成為你的基礎組件?
答案分別是: Bootstrap. Foundation .
如果大家還想深入學習，可以點擊這裡進行學習，再為大家附3個精彩的專題：
Bootstrap學習教程
Bootstrap實戰教程
Bootstrap插件使用教程
是不是很有趣的比較，希望對大家了解前端框架Bootstrap 3和Foundation 5 有所幫助。