|
經(jīng)過一段時間使用，對于二者有一些粗略的了解，關(guān)于具體的比較細節(jié)，可以參考 這篇E章 已經(jīng)寫的非常詳細了。這里只是從另外一些角度來比較這兩個目前最流行的 響應(yīng)式前端框架；
Bootstrap和Foundation的粗略比較
整體來說Foundation比Bootstrap略顯高大上一點，使用的都是比較新的技術(shù)，整體觀是以Mofile first(移動優(yōu)先)來考慮的。
Foundation默認不帶圖標集，它推薦使用 開源字體圖標來實現(xiàn)ICON，好處是可以通過字體大小來調(diào)節(jié)圖片大小， 而bootstrap自帶一個默認的由傳統(tǒng)圖片實現(xiàn)的圖標集；
Foundation 使用 border-box 盒子模型（box model) 即 它定義width 和 height時，border 和 padding是被包含在內(nèi)的， IE6即使用這種模型，個人認為這是一把雙刃劍，可能會跟有些第三方的前端插件有沖突。
Foundation 的網(wǎng)格流式布局跟 Bootstrap差不多，他們都把網(wǎng)頁劃分為十二列，針對不同的設(shè)備顯示不同的列數(shù)，如手機只能顯視一個列單元，桌面電腦可以顯示12個。
Bootstrap 2.2
<div class="row-fluid">
<div class="span7"></div>
<div class="span1"></div>
<div class="span4"></div>
</div>
Foundation 5
<div class="row">
<div class="large-4 columns"></div>
<div class="large-4 columns"></div>
<div class="large-4 columns"></div>
</div> Foundation是首先實現(xiàn)Off Canvas布局的，即隱藏的菜單可以從廁面移出；而Bootstrap2的菜單只能從菜單頂部向下展開，個人認為Foundation的體驗在手機上更好一些; 好在Bootstrap 3.0 版本也加入了Off Canvas布局。 
Bootstrap和Foundation的瀏覽器兼容
Bootstrap最大的優(yōu)點就是瀏覽器兼容，因為使用的技術(shù)較新，F(xiàn)oundation無法支持舊版IE：
Bootstrap 2.3 支持 IE7.0+ Bootstrap 3 支持 IE8.0+ Foundation 支持 IE9.0+ XP系統(tǒng)最高只能升級到IE8, Win7 默認安裝的是IE8， 選擇Foundation即意味著放棄整個XP系統(tǒng)和不能連網(wǎng)升級的Win7系統(tǒng)，這也基本上意味著你基本放棄了一部分中國的電腦桌面，對于面向非IT專業(yè)人士的網(wǎng)站來說，這一點有點致命。對于面向中國用戶的網(wǎng)站來說，Bootstrap也許是更更好的選擇。 對于IE6則可以放心大膽地不支持了，這是OurJS的瀏覽器使用情況, 數(shù)據(jù)來自Google Analytics （谷歌分析） 最近訪問者瀏覽器版本分布情況, 由于OurJS大多面向程序員，所以IE的比例非常小 < 5%的樣子, 因此使用Foundation應(yīng)該也沒什么大問題。 | 1. |  Chrome | 26,793 | 65.78% | | 2. | Firefox | 4,836 | 11.87% | | 3. | Safari (in-app) | 2,007 | 4.93% | | 4. | Internet Explorer | 2,000 | 4.91% | | 5. | Android Browser | 1,986 | 4.88% | | 6. | Safari | 1,912 | 4.69% | | 7. | UC Browser | 465 | 1.14% |
最近訪問者IE瀏覽器版本分布，可以看出IE8的比例還是非常高的，IE6/IE7 非常小，Bootstrap3應(yīng)該也可以放心大膽的用了。 | 1. | 11.0 | 707 | 35.35% | | 2. | 10.0 | 399 | 19.95% | | 3. |  8.0 | 373 | 18.65% | | 4. | 9.0 | 296 | 14.80% | | 5. | 7.0 | 158 | 7.90% | | 6. | 6.0 | 64 | 3.20% |
其實說兩套開源框架都在不斷的相互學習，很難講分出優(yōu)劣，每個人可以根據(jù)自己的需要做出選擇。
PS: OurJS的中文版選擇基于修改過的Bootstrap2.3，英文版則采用了Foundation 5。
|
