WEB前端开发框架Bootstrap3 VS Foundation5
开发工程师,使用Bootstrap.前端开发人员,使用Foundation.我们来谈谈为什么.
Bootstrap与Foundation有许多关键的区别,但是,我想你只需要记住一件事:
ZURB和Twitter的两种设计理念是很清楚的,从他们对自己的框架的命名就可以看出来:Bootstrap有引导,开机自举的意思,换言之,它尝试处理你项目中一切所需要的.而Foundation有创建,创造的意思,换言之,它仅仅给你项目中强有力的创造力.
保持这种看法,现在我来列出两者之间更多的关键区别:
1.UI元素
Foundation只安排了有限的几种元素,Bootstrap则给你了所有你可以想像到的一切元素.
ZURB对于Foundation的设计目标是,纵然你使用预定义的UI元素,也不应该与大家的网站长的太像.
而另一边,Bootstrap则试图给你提供所有定义好的UI元素.
2.REMsVSPixels
Foundation使用REMs,而Bootstrap使用Pixels.
使用Pixels意味着你不得不准确定义一个组件的高,宽,内边距,外边距,而且在每一种设备与屏幕尺寸上,因为不同的设备往往显示效果区别很大.
现在Foundation5使用REMs,而不是EM.这样,避免了EMcascade问题.
使用REMs意味着你可以直接用font-size:80%;就可以让整个组件和它的子组件缩小20%.
值得说明的是,通过REMs,你可以脱离Pixels的细节了,所以,使用REMs来处理是非常值得的.
Foundation还提供了sass的mixin方法来将Pixels转换为REMs,这样,你还可以继续使用Pixels的思考方式来定义页面:
.element{
width:rem-calc(10px);//willbeconvertedtoREMs
}
3.灵活的网格VS预定义的网格
Foundation的网格可以自动适配当前浏览器的宽度.Boostrap则是预定义了几种网格尺寸来适配主流的设备和屏幕.
Bootstrap会在你改变浏览器宽度的时候突然改变它的网格.
Foundation则会灵活适配当前的浏览器宽度,这是一种新的技术手段,自动适配的同时,可以表现的与Transformer一样的效果.
Foundation当网格改变时有两个要点:小,中和大.所有的操作都只有缩小和放大,并适应于当前浏览器的宽度.不需要预定义的屏幕大小,并且更主要的原因是,鼓励你去根据屏幕的大小来定义不同的样式.
使用Bootstrap,你得到一个固定的或者说流形的网格,这意味着你需要分别设定或者说对于网格容器不是一个预定义好的宽度.
使用Foundation和Sass,你可以自由调整最大的网格的大小(中型的和小型的自动被计算),大屏幕的列数,小屏幕的列数.
4.移动设备优先VS也支持移动设备
Foundation设计时已经考虑了任何四角屏幕.而Bootstrap设计时则预先分为:手机,平板,台式机和超大屏幕的台式机.
构建一个优先支持移动设备的网站意味着它肯定在更大的屏幕上是可用的.所以,Foundation鼓励你这样去做:移动优先.
如果你使用Foundation的SassMediaQueryMixin,你就会发现,没有特定的MediaQuery来查询什么是移动设备,而是你使用MediaQuery来定义在更大的屏幕下应该怎么显示.
设计东西时先考虑台式机的话很可能在支持更小屏幕时遇到很大问题,和先考虑手机的话,将会让你专注于什么是对用户最重要的,让你空间提用感上升.
5.社区
Bootstrap有一个更大的社区.而使用Foundation你就不得不自力更生一些.
Bootstrap非常大的亮点就是社区.这是一个非常巨大,包罗万象,几乎找啥都可以找到.
如果你选择了Foundation,自力更生可能就是你不得不掌握的了.几乎所有的解决方法都是为Bootstrap的,你只能自己再去构建自己的.
结论
问你自己几个问题:
你想让某个东西更加易用或者让它更具生活气息?
你想组织自己的CSS,只是让它成为你的基础组件?
答案分别是:Bootstrap.Foundation.
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
是不是很有趣的比较，希望对大家了解前端框架Bootstrap3 和Foundation5有所帮助。