不用bootstrap用什麼

不用bootstrap用什麼？

不用bootstrap可以用foundation，通常情況下，開發工程師會使用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 問題: http://css-tricks .com/font-sizing-with-rem/

使用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 的, 你只能自己再去構建自己的.

以上是不用bootstrap用什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！