使用前端框架Foundation 4来帮助简化响应式设计开发

ゝ一世哀愁。 2022-03-21 09:05 109阅读 0赞

日期：2013-3-12  来源：[GBin1.com][]

[![使用前端框架Foundation 4来帮助简化响应式设计开发][Foundation 4]][Foundation 4_Foundation 4]

[Foundation][]是一套使用广泛的前端开发套件，可以帮助你快速的网站。最近ZURB发布了一个新版本的[Foundation 4前端框架][Foundation]，能够有效的帮助你快速的开发响应式的网站。

[![使用前端框架Foundation 4来帮助简化响应式设计开发][Foundation 4 1]][Foundation 4_Foundation 4 1]

和另外一个套知名的前端框架[BootStrap][]类似，[Foundation][]同样也提供了一套HTML/CSS的模板，可以帮助你快速的搭建网站基础，包括：布局，组件，字体，表单元素和其它常用的页面元素。

使用Foundation有三种途径，包括：

*  直接下载压缩版本的CSS，自定义使用自己需要的部分
 *  自定义编译来生成你需要的元素
 *  使用[SASS][]版本的Foundation来自定义代码

Foundation4 最强大的地方在于有效地整合了[SASS][]，你可以使用[SASS][]中的[Mixins][SASS]概念来简化开发。使得组件的使用更加的简单和便捷。

注意新的移动实现方式并不支持media queries，所以有可能影响IE8上的体验。如果你需要支持IE8，这里有一个[修改版本的Foundation 4][Foundation 4 2]，支持IE8。

因为Foundation4和过去的Foundation3的设计大相径庭，所以ZURB计划继续支持Foundation3一段时间。

如果你对于新版本的Foundation有任何疑问的话，请查看[官方文档][Link 1]，或者查看[Github中的相关代码][Github]，要知道Foundation是Github中最棒的20个明星级别项目之一。相信选择它不会让你失望！

via[ 极客标签][Link 2]

来源：[使用前端框架Foundation 4来帮助简化响应式设计开发][GBin1.com]

[GBin1.com]: http://www.gbin1.com/technology/html/20130312-foundation4-frameworks/
[Foundation 4]: http://www.gbin1.com/technology/html/20130312-foundation4-frameworks/title.jpg
[Foundation 4_Foundation 4]: http://www.gbin1.com/technology/html/20130312-foundation4-frameworks/index.html
[Foundation]: http://foundation.zurb.com/
[Foundation 4 1]: http://www.gbin1.com/technology/html/20130312-foundation4-frameworks/1.jpg
[Foundation 4_Foundation 4 1]: http://www.gbtags.com/gb/networks/uploadimg/73ca8592-5796-4ffb-bcb1-008fcdcaa5b5.jpg
[BootStrap]: http://twitter.github.com/bootstrap/
[SASS]: http://www.gbin1.com/technology/css/20130218-sass-beginner-guide/
[Foundation 4 2]: http://foundation.zurb.com/migration.php
[Link 1]: http://foundation.zurb.com/docs/
[Github]: http://www.gbtags.com/gb/editpost.htm?postid=521#https//github.com/zurb/foundation/.com/zurb/foundation/
[Link 2]: http://www.gbtags.com/gb/share/521.htm