WEB前端開發框架Bootstrap3 VS Foundation5

PC教程網】關于WEB前端開發框架Bootstrap3 VS Foundation5_VS開發介紹:開發工程師, 使用 Bootstrap. 前端開發人員, 使用 Foundation . 我們來談談為什么. Bootstrap 與 Foundation 有許多關鍵的區別, 但是, 我想你只需要記住一件事: ZURB 和 Twitter 的兩種設計理念是很清,下面小編為您針對WEB前端開發框架Bootstrap3 VS Foundation5進行分享:

開發工程師, 使用 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 問題.

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

結論

問你自己幾個問題:

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

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

相關教程

Bootstrap每天必學之前端開發框架

Bootstrap每天必學之前端開發框架

BootStrap學習從現在開始,前端開發框架Bootstrap,可大大簡化網站開發過程,從而深受廣大開發者的喜歡。本文總結了Bootstrap之所以廣泛流傳的11大原因。如果你還沒有使用Twitter Bootstra …

跨平臺移動WEB應用開發框架iMAG入門教程

跨平臺移動WEB應用開發框架iMAG入門教程

iMAG是一個非常簡潔高效的移動跨平臺開發框架,開發一次可以同時兼容Android和iOS平臺,有點兒Web開發基礎就能很快上手。當前移動端跨平臺開發的框架有很多,但用iMAG還有一個好處, …

基于jQuery實現多標簽頁切換的效果(web前端開發)

基于jQuery實現多標簽頁切換的效果(web前端開發)

這里,實現多標簽頁效果的方法有兩個,一個是基于DOM的,另一個是基于jquery的,此次我寫的是一個對于一個電話套餐的不同,顯示不同的標簽頁 方法一: 首先,我們要把頁面的大體 …

Web前端開發的Firefox插件

Web前端開發的Firefox插件

一、Web Developer Web Developer 可說是網頁設計師最常使用的一個 Firefox 擴充套件,它可以協助我們在設計網頁時能夠更加的得心易手,內建 HTML、CSS、Feed等檢驗器,讓我們所設計出來的網頁 …

Web前端開發中找錯的基本思路

Web前端開發中找錯的基本思路

WEB開發主要是兩個交互(B/S數據) 瀏覽器: 1包含html、css、js等客戶端代碼運行錯誤。 傳輸端: 1路徑引入錯誤,常用插件的引入(artDialog、Ztree、JQuery等)、圖片路徑、視頻路徑等。 2 文件 …

全面解讀Python Web開發框架Django

花了兩周時間,利用工作間隙時間,開發了一個基于Django的項目任務管理Web應用。項目計劃的實時動態,可以方便地被項目成員查看(^_^又重復發明輪子了)。從前臺到后臺,好好折騰 …

2014值得推薦的10個移動 Web 應用程序開發框架

2014值得推薦的10個移動 Web 應用程序開發框架

在最近幾年里,移動互聯網高速發展、市場潛力巨大。繼計算機、互聯網之后,移動互聯網正掀起第三次信息技術革命的浪潮,新技術、新應用不斷涌現。今天這篇文章向大家推薦10大 …

Node.js 服務器端應用開發框架 -- Hapi.js

Hapi.js 是一個用來構建基于 Node.js 的應用和服務的富框架,使得開發者把重點放在便攜可重用的應用邏輯而不是構建架構。內建輸入驗證、緩存、認證和其他 Web 應用開發常用的功能。 …

Python的Flask開發框架簡單上手筆記

最簡單的hello world #!/usr/bin/env python# encoding: utf-8from flask import Flaskapp = Flask(__name__)@app.route('/')def index(): return 'hello world'if __name__ == '__main__': app.run(debug=True) #app.run(host='127.0.0.1', port=8000) 之 …

C#應用XML作為數據庫的快速開發框架實現方法

本文實例講述了C#應用XML作為數據庫的快速開發框架實現方法。分享給大家供大家參考。具體如下: 背景 我經常應用C#開發一些小的桌面程序,這些桌面程序往往有以下幾個特點: ① …

内蒙古十一选五任五推荐号