不用bootstrap可以用什么

這篇文章主要介紹不用bootstrap可以用什么，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

不用bootstrap可以用foundation，通常情況下，開發(fā)工程師會使用Bootstrap，而前端開發(fā)人員會優(yōu)先使用Foundation。

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

ZURB 和 Twitter 的兩種設(shè)計(jì)理念是很清楚的, 從他們對自己的框架的命名就可以看出來: 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è)計(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)前瀏覽器的寬度. Boostrap 則是預(yù)定義了幾種網(wǎng)格尺寸來適配主流的設(shè)備和屏幕.

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

Foundation 則會靈活適配當(dāng)前的瀏覽器寬度, 這是一種新的技術(shù)手段, 自動適配的同時(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è)定或者說對于網(wǎng)格容器不是一個(gè)預(yù)定義好的寬度.

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

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

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

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

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

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

5. 社區(qū)

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

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

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

以上是“不用bootstrap可以用什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！