Bootstrap與Foundation的區別

2021-08-02 15:57:46 字數 1725 閱讀 5212

整體來說foundation比bootstrap略顯高大上一點,使用的都是比較新的技術,整體觀是以mofile first(移動優先)來考慮的。

foundation 使用 border-box 盒子模型(box model) 即 它定義width 和 height時,border 和 padding是被包含在內的, ie6即使用這種模型,個人認為這是一把雙刃劍,可能會跟有些第三方的前端外掛程式有衝突。

foundation 的網格流式布局跟 bootstrap差不多,他們都把網頁劃分為十二列,針對不同的裝置顯示不同的列數,如手機只能顯視乙個列單元,桌面電腦可以顯示12個。

class="row-fluid">

class="span7">div>

class="span1">div>

class="span4">div>

div>

foundation 5

class="row">

class="large-4 columns">div>

class="large-4 columns">div>

class="large-4 columns">div>

div>

foundation是首先實現off canvas布局的,即隱藏的選單可以從廁面移出;而bootstrap2的選單只能從選單頂部向下展開,個人認為foundation的體驗在手機上更好一些; 好在bootstrap 3.0 版本也加入了off canvas布局。

bootstrap和foundation的瀏覽器相容

bootstrap最大的優點就是瀏覽器相容,因為使用的技術較新,foundation無法支援舊版ie:

bootstrap 2.3 支援 ie7.0+

bootstrap 3 支援 ie8.0+

foundation 支援 ie9.0+

xp系統最高只能公升級到ie8, win7 預設安裝的是ie8, 選擇foundation即意味著放棄整個xp系統和不能連網公升級的win7系統,這也基本上意味著你基本放棄了一部分中國的電腦桌面,對於面向非it專業人士的**來說,這一點有點致命。對於面向中國使用者的**來說,bootstrap也許是更更好的選擇。

對於ie6則可以放心大膽地不支援了,這是ourjs的瀏覽器使用情況, 資料來自google analytics (谷歌分析)

最近訪問者瀏覽器版本分布情況, 由於ourjs大多面向程式設計師,所以ie的比例非常小 < 5%的樣子, 因此使用foundation應該也沒什麼大問題。

chrome 26,793 65.78%

firefox 4,836 11.87%

internet explorer 2,000 4.91%

android browser 1,986 4.88%

safari 1,912 4.69%

uc browser 465 1.14%

最近訪問者ie瀏覽器版本分布,可以看出ie8的比例還是非常高的,ie6/ie7 非常小,bootstrap3應該也可以放心大膽的用了。

11.0 707 35.35%

10.0 399 19.95%

8.0 373 18.65%

9.0 296 14.80%

7.0 158 7.90%

6.0 64 3.20%

其實說兩套開源框架都在不斷的相互學習,很難講分出優劣,每個人可以根據自己的需要做出選擇。

ps: ourjs的中文版選擇基於修改過的bootstrap2.3,英文版則採用了foundation 5。

響應式布局與Bootstrap

bootstrap的介紹 什麼是響應式布局 讓乙個 相容不同解析度的裝置 給使用者更好的視覺使用體驗。響應式布局的優缺點優點 解決了裝置之間的差異化展示 讓不同的裝置達到最優的體驗 缺點 對開發者來說,相容性 多,工作量大,對瀏覽器來說,載入速度受影響 響應式布局設計原則移動優先 在設計的初期就要考...

bootstrap與jQuery結合的動態進度條

此款進度條實現的功能 1.利用了bootstrap的進度條元件。a.在最外層的中加入class progress,在裡層加入class progress bar從而實現基本的進度條。b.在外層中加入class progress striped實現條紋進度條。c.在內層加入class progress...

最全css與bootstrap的水平垂直居中

一.水平居中 1.塊元素在已知寬度的情況下為其自身設定margin auto 可以用block轉為塊元素 wrap 2.內聯元素可以為其父元素設定text align center 可以用table cell,inline,inline block將塊元素轉為內聯元素 wrap margin和wid...