Bootstrap vs Foundation如何选择靠谱前端框架


发布者 newghost  发布时间 1411215975434
关键字 心得体会  OurJS 
现在OurJS开源网站有两套前端模板了,分别基于Foundation5  和 Bootstrap2.3  (最近已经提交到Github上)。

经过一段时间使用,对于二者有一些粗略的了解,关于具体的比较细节,可以参考这篇E章 已经写的非常详细了。这里只是从另外一些角度来比较这两个目前最流行的 响应式前端框架;


Bootstrap和Foundation的粗略比较

整体来说Foundation比Bootstrap略显高大上一点,使用的都是比较新的技术,整体观是以Mofile first(移动优先)来考虑的。

Foundation默认不带图标集,它推荐使用开源字体图标来实现ICON,好处是可以通过字体大小来调节图片大小, 而bootstrap自带一个默认的由传统图片实现的图标集;

Foundation 使用 border-box 盒子模型(box model) 即 它定义width 和 height时,border 和 padding是被包含在内的, IE6即使用这种模型,个人认为这是一把双刃剑,可能会跟有些第三方的前端插件有冲突。

Foundation 的网格流式布局跟 Bootstrap差不多,他们都把网页划分为十二列,针对不同的设备显示不同的列数,如手机只能显视一个列单元,桌面电脑可以显示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是首先实现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应该也没什么大问题。

1. Chrome26,79365.78%
2. Firefox4,83611.87%
3. Safari (in-app)2,0074.93%
4. Internet Explorer2,0004.91%
5. Android Browser1,9864.88%
6. Safari1,9124.69%
7. UC Browser4651.14%

最近访问者IE浏览器版本分布,可以看出IE8的比例还是非常高的,IE6/IE7 非常小,Bootstrap3应该也可以放心大胆的用了。


1. 11.070735.35%
2. 10.039919.95%
3. 8.037318.65%
4. 9.029614.80%
5. 7.01587.90%
6. 6.0643.20%

 
其实说两套开源框架都在不断的相互学习,很难讲分出优劣,每个人可以根据自己的需要做出选择。

PS: OurJS的中文版选择基于修改过的Bootstrap2.3,英文版则采用了Foundation 5。





回复 (24)
  • #
  • #1 母术少 1411349378618

    ads

  • #2 赖布夺 1411349413243

    fdsafdsafasdfdaf

  • #3 白马勿 1411349682578

    fdaasdfasdfasdfasdf

  • #4 think2011 1411387307778

    so.. 怎么切换英文版?

  • #5 newghost 1411387765740

    @think2011 #3

    这个网站没有布署。可以看看DEMO网站 http://code.ourjs.com

  • #6 颜阶户 1411532880105

    oh.. mar

  • #7 皮虫什 1457503229858

    111

  • #8 严从夕 1459859859790

    cool

  • #9 骆红岁 1470306339273

    话说没有用过

  • #10 欧礼达 1483499154852

    ```````1qewqedwqewewqeqwdasdsadasdasda

  • #11 岑七处 1488461821984

    学习了

  • #12 萧也伪 1497354765405

    范德萨发fdsafd

  • #13 kpkp410 1504122132125

    長相可愛在校學生還是處女等待破處中+賴 ppp298

    葡萄 155cm Ccup 40kg 19歲 長相可愛 在校學生 很淫蕩的 胸部和穴穴都是超粉哦~ 緊緊的 濕濕的+賴ppp298

  • #14 尤瓜禾 1506690543867

    不错啊!象美丽时尚秀 这样的网站可以使用这个框架吗?

  • #15 戚夺讲 1507972997637

    厕面。拜托,字写错了

  • #16 方异讯 1510208719816

    fdddddddddd

  • #17 方异讯 1510208753516

    @戚夺讲 #14 dfdff dddd

  • #18 骆对史 1519708649219

    呵呵

  • #19 曹生延 1525589231869

    kjkjkjk

  • #20 徐加圣 1525589263207

    kjhjhjhjhjhjklkjkjkjkj

  • #21 alber1986 1526026680968

    我选择Bootstrap,顺便分享一下我收集的Bootstrap前后端模板 http://www.sucaihuo.com/search?keyword=Bootstrap&mtype=1

  • #22 alber1986 1526026730141

    我选择Bootstrap,顺便分享一下我收集的Bootstrap前后端模板 http://www.sucaihuo.com/search?keyword=Bootstrap&mtype=1

  • #23 廉鸟用 1536238146469

    @alber1986 #21

    test在这里输入代码

  • #24 江长军 1541066546820

    加賴8520599可看水蜜桃頂級性愛俱樂部【外送北中南茶坊留言板】 加賴8520599可看水蜜桃頂級性愛俱樂部【外送北中南茶坊留言板】 加賴8520599可看水蜜桃頂級性愛俱樂部【外送北中南茶坊留言板】 加賴8520599可看水蜜桃頂級性愛俱樂部【外送北中南茶坊留言板】 加賴8520599可看水蜜桃頂級性愛俱樂部【外送北中南茶坊留言板】 加賴8520599可看水蜜桃頂級性愛俱樂部【外送北中南茶坊留言板】 加賴8520599可看水蜜桃頂級性愛俱樂部【外送北中南茶坊留言板】 加賴8520599可看水蜜桃頂級性愛俱樂部【外送北中南茶坊留言板】 加賴8520599可看水蜜桃頂級性愛俱樂部【外送北中南茶坊留言板】

微信扫码 立即评论