WEB前端開發(fā)框架Bootstrap3 VS Foundation5,這篇文章主要介紹了Bootstrap3與Foundation5的五大區(qū)別,感興趣的小伙伴們可以參考一下

開發(fā)工程師, 使用 Bootstrap. 前端開發(fā)人員, 使用 Foundation. 我們來談?wù)劄槭裁?

Bootstrap 與 Foundation 有許多關(guān)鍵的區(qū)別, 但是, 我想你只需要記住一件事:

ZURB 和 Twitter 的兩種設(shè)計理念是很清楚的, 從他們對自己的框架的命名就可以看出來: Bootstrap 有引導(dǎo), 開機(jī)自舉的意思, 換言之, 它嘗試處理你項(xiàng)目中一切所需要的. 而 Foundation 有創(chuàng)建, 創(chuàng)造的意思, 換言之, 它僅僅給你項(xiàng)目中強(qiáng)有力的創(chuàng)造力.

保持這種看法, 現(xiàn)在我來列出兩者之間更多的關(guān)鍵區(qū)別:

1. UI 元素

Foundation 只安排了有限的幾種元素, Bootstrap 則給你了所有你可以想像到的一切元素.

ZURB 對于 Foundation 的設(shè)計目標(biāo)是, 縱然你使用預(yù)定義的 UI 元素, 也不應(yīng)該與大家的網(wǎng)站長的太像.

而另一邊, Bootstrap 則試圖給你提供所有定義好的 UI 元素.

2. REMs VS Pixels

Foundation 使用 REMs, 而 Bootstrap 使用 Pixels.

使用 Pixels 意味著你不得不準(zhǔn)確定義一個組件的高, 寬, 內(nèi)邊距, 外邊距, 而且在每一種設(shè)備與屏幕尺寸上, 因?yàn)椴煌脑O(shè)備往往顯示效果區(qū)別很大.

現(xiàn)在 Foundation 5 使用 REMs, 而不是 EM. 這樣, 避免了 EM cascade 問題.

使用 REMs 意味著你可以直接用 font-size: 80%; 就可以讓整個組件和它的子組件縮小 20%.

值得說明的是, 通過 REMs, 你可以脫離 Pixels 的細(xì)節(jié)了, 所以, 使用 REMs 來處理是非常值得的.

Foundation 還提供了 sass 的 mixin 方法來將 Pixels 轉(zhuǎn)換為 REMs, 這樣, 你還可以繼續(xù)使用 Pixels 的思考方式來定義頁面:

.element {

width: rem-calc(10px); // will be converted to REMs

}

3. 靈活的網(wǎng)格 VS 預(yù)定義的網(wǎng)格

Foundation 的網(wǎng)格可以自動適配當(dāng)前瀏覽器的寬度. Boostrap 則是預(yù)定義了幾種網(wǎng)格尺寸來適配主流的設(shè)備和屏幕.

Bootstrap 會在你改變?yōu)g覽器寬度的時候突然改變它的網(wǎng)格.

Foundation 則會靈活適配當(dāng)前的瀏覽器寬度, 這是一種新的技術(shù)手段, 自動適配的同時, 可以表現(xiàn)的與 Transformer 一樣的效果.

Foundation 當(dāng)網(wǎng)格改變時有兩個要點(diǎn): 小, 中和大. 所有的操作都只有縮小和放大, 并適應(yīng)于當(dāng)前瀏覽器的寬度. 不需要預(yù)定義的屏幕大小, 并且更主要的原因是, 鼓勵你去根據(jù)屏幕的大小來定義不同的樣式.

使用 Bootstrap, 你得到一個固定的或者說流形的網(wǎng)格, 這意味著你需要分別設(shè)定或者說對于網(wǎng)格容器不是一個預(yù)定義好的寬度.

使用 Foundation 和 Sass, 你可以自由調(diào)整最大的網(wǎng)格的大小( 中型的和小型的自動被計算 ), 大屏幕的列數(shù), 小屏幕的列數(shù).

4. 移動設(shè)備優(yōu)先 VS 也支持移動設(shè)備

Foundation 設(shè)計時已經(jīng)考慮了任何四角屏幕. 而 Bootstrap 設(shè)計時則預(yù)先分為: 手機(jī), 平板, 臺式機(jī)和超大屏幕的臺式機(jī).

構(gòu)建一個優(yōu)先支持移動設(shè)備的網(wǎng)站意味著它肯定在更大的屏幕上是可用的. 所以, Foundation 鼓勵你這樣去做: 移動優(yōu)先.

如果你使用 Foundation 的 Sass Media Query Mixin, 你就會發(fā)現(xiàn), 沒有特定的 Media Query 來查詢什么是移動設(shè)備, 而是你使用 Media Query 來定義在更大的屏幕下應(yīng)該怎么顯示.

設(shè)計東西時先考慮臺式機(jī)的話很可能在支持更小屏幕時遇到很大問題, 和先考慮手機(jī)的話, 將會讓你專注于什么是對用戶最重要的, 讓你空間提用感上升.

5. 社區(qū)

Bootstrap 有一個更大的社區(qū). 而使用 Foundation 你就不得不自力更生一些.

Bootstrap 非常大的亮點(diǎn)就是社區(qū). 這是一個非常巨大, 包羅萬象, 幾乎找啥都可以找到.

如果你選擇了 Foundation, 自力更生可能就是你不得不掌握的了. 幾乎所有的解決方法都是為 Bootstrap 的, 你只能自己再去構(gòu)建自己的.

結(jié)論

問你自己幾個問題:

你想讓某個東西更加易用或者讓它更具生活氣息?

你想組織自己的 CSS, 只是讓它成為你的基礎(chǔ)組件?

答案分別是: Bootstrap. Foundation.

是不是很有趣的比較，希望對大家了解前端框架Bootstrap 3 和 Foundation 5 有所幫助。