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

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

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

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

1. UI 元素

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

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

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

2. REMs VS Pixels

Foundation 使用 REMs, 而 Bootstrap 使用 Pixels.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5. 社區(qū)

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

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

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

結(jié)論

問(wèn)你自己幾個(gè)問(wèn)題:

你想讓某個(gè)東西更加易用或者讓它更具生活氣息?
你想組織自己的 CSS, 只是讓它成為你的基礎(chǔ)組件?
答案分別是: Bootstrap. Foundation.

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

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

最新評(píng)論