Bootstrap 與 Foundation 的區(qū)別

Bootstrap 與 Foundation 的區(qū)別？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

兩者之間的關(guān)鍵區(qū)別:

1. UI 元素

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

ZURB 對(duì)于 Foundation 的設(shè)計(jì)目標(biāo)是, 縱然你使用預(yù)定義的 UI 元素, 也不應(yīng)該與大家的網(wǎ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 問題: http://css-tricks.com/font-sizing-with-rem/

使用 REMs 意味著你可以直接用 font-size: 80%; 就可以讓整個(gè)組件和它的子組件縮小 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)適配當(dāng)前瀏覽器的寬度. Boostrap 則是預(yù)定義了幾種網(wǎng)格尺寸來適配主流的設(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ù)屏幕的大小來定義不同的樣式.

使用 Bootstrap, 你得到一個(gè)固定的或者說流形的網(wǎng)格, 這意味著你需要分別設(shè)定或者說對(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 來查詢什么是移動(dòng)設(shè)備, 而是你使用 Media Query 來定義在更大的屏幕下應(yīng)該怎么顯示.

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

5. 社區(qū)

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

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

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

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)Bootstrap 與 Foundation 的區(qū)別大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。