Bootstrap vs Foundation

原创 2016年08月31日 10:58:19

Bootstrap和Foundation的粗略比较
整体来说Foundation比Bootstrap略显高大上一点,使用的都是比较新的技术,整体观是以Mofile first(移动优先)来考虑的。
Foundation默认不带图标集,它推荐使用开源字体图标来实现ICON,好处是可以通过字体大小来调节图片大小, 而bootstrap自带一个默认的由传统图片实现的图标集;
Foundation 使用 border-box 盒子模型(box model) 即 它定义width 和 height时,border 和 padding是被包含在内的, IE6即使用这种模型,个人认为这是一把双刃剑,可能会跟有些第三方的前端插件有冲突。
Foundation 的网格流式布局跟 Bootstrap差不多,他们都把网页划分为十二列,针对不同的设备显示不同的列数,如手机只能显视一个列单元,桌面电脑可以显示12个。
Foundation是首先实现Off Canvas布局的,即隐藏的菜单可以从厕面移出;而Bootstrap2的菜单只能从菜单顶部向下展开,个人认为Foundation的体验在手机上更好一些; 好在Bootstrap 3.0 版本也加入了Off Canvas布局。
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应该也没什么大问题。
其实说两套开源框架都在不断的相互学习,很难讲分出优劣,每个人可以根据自己的需要做出选择。
PS: OurJS的中文版选择基于修改过的Bootstrap2.3,英文版则采用了Foundation 5。
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Bootstrap VS Semantic VS Foundation

相信多数科技公司都没有自己动手设计UI的能力! 看到这个开头,估计很多程序猿很不服气,我们那个美工可NB了,各种切图,各种特效! 如果你跟我讲这些,就说明你还没有明白UI具体指什么。...

20个优秀的前端框架 Twitter BootStrap Foundation (MIT;响应式)

1. Twitter BootStrap(Apache v2.0;响应式) 时髦、直观并且强大的前端框架,让Web开发变得更加容易。 2. Foundation(MIT;响应式) 最先进的响...

20个优秀的前端框架 Twitter BootStrap Foundation (MIT;响应式)

1. Twitter BootStrap(Apache v2.0;响应式) 时髦、直观并且强大的前端框架,让Web开发变得更加容易。 2. Foundation(MIT;响应式) 最先进的响...

Bootstrap和Foundation以及Semantic UI对比和使用

Semantic UI—完全语义化的前端界面开发框架,跟Bootstrap和Foundation比起来,还是有些不同的,在功能特性上、布局设计上、用户体验上均存在很多差异。文章里详细介绍了Semant...

CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(4)构造尺寸更灵活的背景

相比传统的图片背景来说,使用CSS构造背景色不仅可以降低网络传输的开销,更由于其尺寸的可控性受到开发者的青睐。
  • kgsew
  • kgsew
  • 2014-12-12 14:22
  • 822

Bootstrap 和 Foundation 的比较

转自:http://blog.csdn.net/highkay/article/details/8046667 http://foundation.zurb.com/ ...

CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(5)使用放射渐变制作光影效果

阴影效果通常用来表现光线投射在物体上的感觉,如果想制作一个如图5.19所示的文字光影效果,就可以使用背景的线性渐变进行构建。
  • kgsew
  • kgsew
  • 2014-12-16 17:10
  • 919

[前端框架] Bootstrap 3 与 Foundation 5 的五大区别

[前端框架] Bootstrap 3 与 Foundation 5 的五大区别
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)