OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

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


分享到
分类 心得体会   关键字 OurJS   发布 newghost  1411215975434
注意 转载须保留原文链接,译文链接,作者译者等信息。  
现在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。

社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. NodeBots-JavaScript在智能设备驱动(物联网)中的崛起
  2. CSS的力量:用一个DIV画图
  3. 内存管理技巧:如何避免JavaScript的内存泄露
  4. 微软Azure云推出基于JSON的NoSQL数据库DocumentDB
  5. 响应式设计在图片上的应用: 一个HTML元素如何让Web更快
  6. 前置逗号是不好的JavaScript代码书写习惯吗?
  7. CSS垂直水平完全居中手册
  8. 今天我去面试, 受打击了:你是学 .net 的吧?
  9. JavaScript中匿名函数和命名函数的性能差异
  10. LowDB - 基于Node的纯Json文件数据库
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 心得体会
  1. CSS垂直水平完全居中手册
  2. 避免误用 Redis
  3. CSS的力量:用一个DIV画图
  4. 读懂心理学:网页界面设计实用指南三则
  5. 树莓派的联合创始人访谈 - 我们是怎么让大家都成为DIY黑客的
  6. CSS字体大小: em与px、pt、百分比之间的对比
  7. Readme文档驱动型开发
  8. 皇帝的新衣:Node.js
  9. “设计师思维”正在毁灭我们
  10. 现在,你为什么应该学Node.js

 关键字 - OurJS
  1. Bootstrap vs Foundation如何选择靠谱前端框架
  2. 在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
  3. OurJS-免费开源的博客引擎,论坛系统,网站模板和轻量级的CMS
  4. 等待已久的jQuery 3.0带来了更精简的编译
  5. NodeJS on Nginx: 使用nginx反向代理处理静态页面
  6. 拿什么守护你的Node.JS进程: Node出错崩溃了怎么办?
  7. 各大邮件群发/订阅代理服务商比较
  8. WebSvr匹配首页问题
  9. 在OurJS开源博客网站中添加自定义缩略图片

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号