WEB前端开发框架Bootstrap3 VS Foundation5


Posted in Javascript onMay 16, 2016

开发工程师, 使用 Bootstrap. 前端开发人员, 使用 Foundation. 我们来谈谈为什么.

Bootstrap 与 Foundation 有许多关键的区别, 但是, 我想你只需要记住一件事:

ZURB 和 Twitter 的两种设计理念是很清楚的, 从他们对自己的框架的命名就可以看出来: Bootstrap 有引导, 开机自举的意思, 换言之, 它尝试处理你项目中一切所需要的. 而 Foundation 有创建, 创造的意思, 换言之, 它仅仅给你项目中强有力的创造力.

保持这种看法, 现在我来列出两者之间更多的关键区别:

1. UI 元素

Foundation 只安排了有限的几种元素, Bootstrap 则给你了所有你可以想像到的一切元素.

ZURB 对于 Foundation 的设计目标是, 纵然你使用预定义的 UI 元素, 也不应该与大家的网站长的太像.

而另一边, Bootstrap 则试图给你提供所有定义好的 UI 元素.

2. REMs VS Pixels

Foundation 使用 REMs, 而 Bootstrap 使用 Pixels.

使用 Pixels 意味着你不得不准确定义一个组件的高, 宽, 内边距, 外边距, 而且在每一种设备与屏幕尺寸上, 因为不同的设备往往显示效果区别很大.

现在 Foundation 5 使用 REMs, 而不是 EM. 这样, 避免了 EM cascade 问题.

使用 REMs 意味着你可以直接用 font-size: 80%; 就可以让整个组件和它的子组件缩小 20%.

值得说明的是, 通过 REMs, 你可以脱离 Pixels 的细节了, 所以, 使用 REMs 来处理是非常值得的.

Foundation 还提供了 sass 的 mixin 方法来将 Pixels 转换为 REMs, 这样, 你还可以继续使用 Pixels 的思考方式来定义页面:

.element {
 width: rem-calc(10px); // will be converted to REMs
}

3. 灵活的网格 VS 预定义的网格

Foundation 的网格可以自动适配当前浏览器的宽度. Boostrap 则是预定义了几种网格尺寸来适配主流的设备和屏幕.

Bootstrap 会在你改变浏览器宽度的时候突然改变它的网格.

Foundation 则会灵活适配当前的浏览器宽度, 这是一种新的技术手段, 自动适配的同时, 可以表现的与 Transformer 一样的效果.

Foundation 当网格改变时有两个要点: 小, 中和大. 所有的操作都只有缩小和放大, 并适应于当前浏览器的宽度. 不需要预定义的屏幕大小, 并且更主要的原因是, 鼓励你去根据屏幕的大小来定义不同的样式.

使用 Bootstrap, 你得到一个固定的或者说流形的网格, 这意味着你需要分别设定或者说对于网格容器不是一个预定义好的宽度.

使用 Foundation 和 Sass, 你可以自由调整最大的网格的大小( 中型的和小型的自动被计算 ), 大屏幕的列数, 小屏幕的列数.

4. 移动设备优先 VS 也支持移动设备

Foundation 设计时已经考虑了任何四角屏幕. 而 Bootstrap 设计时则预先分为: 手机, 平板, 台式机和超大屏幕的台式机.

构建一个优先支持移动设备的网站意味着它肯定在更大的屏幕上是可用的. 所以, Foundation 鼓励你这样去做: 移动优先.

如果你使用 Foundation 的 Sass Media Query Mixin, 你就会发现, 没有特定的 Media Query 来查询什么是移动设备, 而是你使用 Media Query 来定义在更大的屏幕下应该怎么显示.

设计东西时先考虑台式机的话很可能在支持更小屏幕时遇到很大问题, 和先考虑手机的话, 将会让你专注于什么是对用户最重要的, 让你空间提用感上升.

5. 社区

Bootstrap 有一个更大的社区. 而使用 Foundation 你就不得不自力更生一些.

Bootstrap 非常大的亮点就是社区. 这是一个非常巨大, 包罗万象, 几乎找啥都可以找到.

如果你选择了 Foundation, 自力更生可能就是你不得不掌握的了. 几乎所有的解决方法都是为 Bootstrap 的, 你只能自己再去构建自己的.

结论

问你自己几个问题:

你想让某个东西更加易用或者让它更具生活气息?
你想组织自己的 CSS, 只是让它成为你的基础组件?
答案分别是: Bootstrap. Foundation.

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

是不是很有趣的比较,希望对大家了解前端框架Bootstrap 3 和 Foundation 5 有所帮助。

Javascript 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
聊聊鉴权那些事(推荐)
Aug 22 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
原生js实现自定义滚动条组件
Jan 20 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
May 16 #Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 #Javascript
Bootstrap所支持的表单控件实例详解
May 16 #Javascript
移动端横屏的JS代码(beta)
May 16 #Javascript
js实现带农历和八字等信息的日历特效
May 16 #Javascript
jQuery 常用代码集锦(必看篇)
May 16 #Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 #Javascript
You might like
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
PHP文件与目录操作示例
2016/12/24 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
javascript获取当前ip的代码
2009/05/10 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
python执行子进程实现进程间通信的方法
2015/06/02 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
土木建筑学生自我评价
2014/01/14 职场文书
收款授权委托书
2014/10/02 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
python解决12306登录验证码的实现
2021/04/18 Python
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python