【特别推荐】14个支持响应式设计的流行前端开发框架

浅浅的花香味﹌ 2021-11-10 09:48 242阅读 0赞

在几年前，并没有真正意义上的前端开发。随着网络技术的发展，网站和 [ **Web**][_Web] 应用程序变得越来越复杂，前端部分的工作独立出来逐渐成为现在的前端开发。如今，我们可以看到越来越多的公司在招聘前端开发岗位。

前端开发并不容易，除了掌握基本的 [ **HTML**][_HTML]、[**CSS**][CSS] 和 [ **Javascript**][_Javascript] 之外，因为不同版本的浏览器和平台，你需要知道如何做一个跨浏览器的网站。而最新的发展趋势——响应式设计，它不仅使 Web 项目开发更难，也需要花费更多的开发时间。

不过，有很多优秀的框架可以帮助到你，这篇文章挑选了14个响应式的前端框架，列出了每个框架的 UI 组件和 Javascript 插件，几乎所有的都使用了响应式网格系统。就个人而言，我比较喜欢 [ **Twitter Boostrap**][_Twitter Boostrap]，你最喜欢这里面的哪个呢？

您可能感兴趣的相关文章

*  [Web 前端开发人员和设计师必读文章集锦][Web]
 *  [十个拥有丰富 UI 组件的 JavaScript 框架][UI _ JavaScript]
 *  [十款精心挑选的在线 CSS3 代码生成工具][CSS3]
 *  [开发者必备的八个最佳云端集成开发环境][Link 1]
 *  [2012年度最佳 Web 前端开发工具和框架][2012_ Web]

这些前端框架能为您提供以下好处：

*  **跨浏览器：**前端框架都在不同的浏览器测试通过。
 *  **一致性：** UI 组件，如导航，按钮，标签，表单，下拉菜单，表格... 他们的风格都相互统一。
 *  **快速开发：**您可以轻松，快速的构建一个布局。他们通常有代码片段和优秀的文档。
 *  **响应式：**所有 CSS 组件和 Javascript 插件能够从桌面扩展到移动端。

## [**InK**][InK] ##

[![SouthEast][]][InK]

Ink 是一个用于快速开发 Web 界面的 UI 套件，简单易用和。它通过整合 HTML，CSS 和 JavaScript 来提供现代化的解决方案，构建布局，显示通用的界面元素，为你的用户实现内容为中心的和用户友好的互动功能。

*  **HTML & CSS 组件：**布局，导航，排版，图标，表格，提醒，表单。
 *  **JavaScript 组件：**画廊，模态窗口，表格，可排序的日期选择器，选项卡，表单验证，行为（停靠，折叠，关闭）。
 *  **其它特性：**支持** **Sass 混入。

## [**GroundworkCSS**][GroundworkCSS] ##

[![2.jpg][]][GroundworkCSS]

GroundworkCSS 灵活的网格系统使你能够快速开发，并能够适应任何屏幕尺寸，从手持设备到大尺寸的显示屏。GroundworkCSS 构建在强大的 CSS 预处理器 Sass 的基础上。Sass 是对 CSS3 的扩展，并添加了嵌套规则，变量，混入，选择器继承等等众多特性。使用命令行工具或 Web 框架插件可以转换为标准的 CSS 代码。

*  **HTML & CSS 组件：**网格，布局，排版，按钮，瓷砖，表格，表格，图示，社会的图标，响应文本，消息，警报。
 *  **JavaScript 组件：**导航，标签，工具提示。
 *  **其它特性：**支持 Sass 混入。

## [**Ivory**][Ivory] ##

[![3.jpg][]][Ivory]

灵活，强大的响应式 Web 框架，使 Web 开发更快，更容易。支持 1200 像素到 320px 区间的响应式布局。

*  **HTML & CSS 组件：**网格，排版，表单，按钮，提醒，分页，面包屑，列表，表格。
 *  **JavaScript 组件：**工具提示，选项卡，切换开关，手风琴。

## [**Foundation**   ][Foundation_] ##

[![4.jpg][]][Foundation_]

Foundation 是由加利福尼亚州的产品设计公司 Zurb 推出的。这是目前最先进的响应式前端框架，它有很多的模板布局，UI 组件的 CSS 样式，也收录了很多他们自己的 JavaScript 插件。

*  **HTML & CSS 组件：**网格布局模板，图标，字体，响应式表格，SVG 社交图标，分页，面包屑，边栏导航，按钮，字体，标签，提醒，面板，价格表，进度条，表格，缩略图。
 *  **JavaScript 组件：**下拉按钮，分割按钮，开关，自适应视频，灯箱，下拉列表，导航，显示模态窗口，选项卡，工具提示。
 *  **其他特性：**自定义皮肤的表单，SCSS 混入。

## [**Grumby**][Grumby] ##

[![5.jpg][]][Grumby]

Gumby 2 基于强大的 Sass 构建，Sass 是一个功能强大的 CSS 预处理器，这使我们能够快速的开发自己的 Gumby，并为您提供新的工具，让你能够在 Gumby 的框架基础上快速定制。

*  **HTML & CSS 组件：**网格，表单，按钮，导航，标签，Entypo 图标。
 *  **JavaScript 组件：**切换开关，下拉框，选项卡，模态窗口。
 *  **其他特性：**自定义皮肤的表单，SASS & Compass。

## [**HTML KickStart**][HTML KickStart] ##

[![6.jpg][]][HTML KickStart]

超精益的 HTML5，CSS & JS 模块，用于快速网站制作。它有一个全面的 UI 组件，也有一些有用的 JavaScript 插件，它的目标是成为设计师的朋友。

*  **HTML & CSS 组件：**网格，排版，按钮，按钮条，列表，表格，图标，面包屑，图像，表格。
 *  **JavaScript：**菜单，工具提示，语法高亮，选项卡，幻灯片，表单验证。
 *  **其他特性：**额外的 CSS 工具。

## [Maxmertkit][] ##

[![7.jpg][]][Maxmertkit]

这个框架是由 Vetrenko Maxim Sergeevich 创建的，使程序员的生活更轻松。Maxmerkit 是基于部件修改器编码风格的一个 CSS 框架。

*  **HTML & CSS 组件：**网格布局，typograpghy，徽章，按钮，插入符，表格，图标，标签，菜单，进度表，下拉菜单，工具提示。
 *  **JavaScript 组件：**按钮，转盘，模态窗口，通知，弹出层，选项卡，滚动侦测。
 *  **其他特性：**支持 Sass, Coffee Script。

## [**Twitter Bootstrap**][Twitter Bootstrap] ##

[![8.jpg][]][Twitter Bootstrap]

Bootstrap 是基于 HTML，CSS 和 JavaScript 的简洁灵活的流行前端框架及交互组件集，由微博的先驱 Twitter 在2011年8月开源的整套前端解决解决方案。[**Bootstrap**][Bootstrap] 有非常完备和详尽的开发文档，[**Web**][Web 1] 开发人员能够轻松搭建出清爽风格的界面以及实现良好的交互效果。

*  **HTML & CSS 组件： **网格，布局，排版，代码，表格，表单，按钮，图像，图标，按钮组，导航，面包屑，分页，选项卡，徽章，缩略图，提醒，进度条。
 *  **JavaScript 组件： **过渡，模态窗口，下拉框，滚动检测，标签，工具提示，弹出层，警报，按钮，手风琴，旋转木马，自动补齐。
 *  **其它特性：** 支持定制， LESS CSS。

## [**Skeleton**][Skeleton] ##

[![9.jpg][]][Skeleton]

Skeleton 是一个小集合的 CSS 文件，可以帮助你迅速开发任何尺寸，外观漂亮的网站，例如用于 17 寸笔记本电脑屏幕或 iPhone 屏幕的。Skeleton 建立在三个核心原则之上：兼容移动端的响应式网格，快速入门，风格无关。Skeleton 对于大多数开发者是一个相当不错的选择，因为它是轻量级的且易于使用。

*  **HTML & CSS 组件： **网格，排版，按钮，表单，媒体查询。

## [**Kube**][Kube] ##

[![10.jpg][]][Kube]

Kube 是由 imperavi （他也是著名的 Redactor 编辑器的作者）发布的前端框架，以使设计者/开发者的生活更轻松。简约而不简单，适应性和响应式能够使用各种需求。革命性的灵活网格和漂亮的印刷字体，没有任何强加的样式。

*  **HTML & CSS 组件：**排版，表单，网格，表格，按钮，导航，图标。
 *  **JavaScript 组件： **按钮，标签。
 *  **其它特性：**支持 LESS CSS。

## [**Helium**][Helium] ##

[![11.jpg][]][Helium]

Helium 是一种前端响应式 Web 开发框架，用于 HTML5 和 CSS3 项目的快速原型设计和实际开发。它在许多方面与 Twitter Bootstrap 和 ZURB Foundation 相似。然而，不同于这两个框架的是，Helium 的目的是要更轻量，更容易更改。把它看成是一个典型的汽车，在那里你可以打开引擎盖，容易对发动机进行改装。

*  **HTML & CSS 组件： **网格，按钮，排版，表格。
 *  **JavaScript 组件： **下拉框，表单验证，模态窗口。
 *  **其它特性：** 支持 SASS & Compass。

## [**Markup**][Markup] ##

[![12.jpg][]][Markup]

Markup 框架是一个布局，窗口小部件，排版样式和其他的 UI 组件的集合，可以根据自己的需要进行整合。

*  **HTML & CSS 组件：**布局，网格，排版，表格，按钮，标题，面包屑，消息，导航列表，导航菜单。
 *  **JavaScript 组件： **无 Javascript，纯 CSS。

## [**Topcoat**][Topcoat] ##

[![13.jpg][]][Topcoat]

Topcoat 是一个 CSS 集合，用于简洁和快速的 Web 应用程序开发。它是一个开源库，不需要任何 JavaScript 内置的用户界面元素。

*  **HTML & CSS 组件： **图标，字体，按钮，面包屑，按钮栏，表格，下拉列表，滑动开关，标签，切换按钮，选择，滑块
 *  **JavaScript 组件： **无 Javascript ，纯 CSS

## [**PureCSS**][PureCSS] ##

[![SouthEast 1][]][PureCSS]

Pure 是一组轻量的，响应式的 CSS 模块，您可以使用在任何的 [**Web**][_Web] 项目中。充分考虑了移动设备中的使用，保持文件体积尽量小，每行 [**CSS**][CSS] 都进行了仔细的考虑。Pure 基于 Normalize.css 构建，并提供布局以及 原生 HTML 元素的风格，加上最常见的 UI 组件。相信这些都是你需要的。

*  **HTML & CSS 组件： **网格，排版，表格，按钮，表格，菜单。
 *  **JavaScript 组件： **无 Javascript ，纯 CSS。
 *  **其它特性：** 皮肤制作器，YU 库。

## 总结 ##

我必须要说的是，根据项目的不同要求，大部分的时间你都需要对使用的框架进行调整以符合您的设计。我们不应该完全使用框架来建立一个网站，因为这将极大地限制设计师的潜力。

如果前端的设计或布局并不重要，我们可以使用该框架。例如在网站后台管理系统的使用 Twitter Bootstrap，它可以帮助你节省60%的开发时间。

有时候，你可能只需要使用框架中的一部分，例如网格系统，那么别的不需要的就可以删除。总而言之，没有完美的前端框架，要根据项目的需求和实际使用场景灵活变通，让框架成为你的助手而不是障碍。

**如果您觉得这篇文章对您有用，记得轻轻点击一下右下角的【推荐】哦：）**

### 您可能感兴趣的相关文章 ###

*  [10套精美的免费网站后台管理系统模板][10]
 *  [推荐8款优秀的免费 Web 安全测试工具][8_ Web]
 *  [60款很酷的 jQuery 幻灯片演示和下载][60_ jQuery]
 *  [8个惊艳的 HTML5 和 JavaScript 特效][8_ HTML5 _ JavaScript]
 *  [35款精致的 CSS3 和 HTML5 网页模板][35_ CSS3 _ HTML5]

英文链接：[14 Useful Responsive Front-end Frameworks][14 Useful Responsive_Front-end Frameworks]

编译来源：[梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源][_ _ _]

hide

[_Web]: http://www.cnblogs.com/lhb25/category/279316.html
[_HTML]: http://www.cnblogs.com/lhb25/category/146076.html
[CSS]: http://www.cnblogs.com/lhb25/category/146075.html
[_Javascript]: http://www.cnblogs.com/lhb25/category/146074.html
[_Twitter Boostrap]: http://www.cnblogs.com/lhb25/archive/2012/09/11/resources-that-complement-twitter-bootstrap.html
[Web]: http://www.cnblogs.com/lhb25/p/must-read-links-for-web-designers-and-developers-volume-17.html
[UI _ JavaScript]: http://www.cnblogs.com/lhb25/archive/2012/09/17/10-javascript-framework-with-rich-ui-component.html
[CSS3]: http://www.cnblogs.com/lhb25/archive/2012/09/27/10-css3-online-generator-tools.html
[Link 1]: http://www.cnblogs.com/lhb25/archive/2012/11/20/cloud-ide-for-developers.html
[2012_ Web]: http://www.cnblogs.com/lhb25/archive/2012/12/28/best-tools-for-web-development-b.html
[InK]: http://ink.sapo.pt/
[SouthEast]: /images/20211109/19ed4943a3b3401cb0c112e100e618f5.png
[GroundworkCSS]: http://groundwork.sidereel.com/?url=home
[2.jpg]: /images/20211109/22c77c9312894ccebe4f4c30f28d5802.png
[Ivory]: http://weice.in/ivory/index.html
[3.jpg]: /images/20211109/c8ca91b4de4f4e47a785d945e2e28bc1.png
[Foundation_]: http://foundation.zurb.com/
[4.jpg]: /images/20211109/463411dc43784fb6b8a7fdf66447559b.png
[Grumby]: http://gumbyframework.com/
[5.jpg]: /images/20211109/8ff42a1431e24210812b1a5913c4db4d.png
[HTML KickStart]: http://www.99lime.com/elements/
[6.jpg]: /images/20211109/5db4cbdfa48846629ce7e784349c4355.png
[Maxmertkit]: http://www.maxmert.com/
[7.jpg]: /images/20211109/f5128611f94245fabbd9bbf37ee95f0d.png
[Twitter Bootstrap]: http://twitter.github.io/bootstrap/
[8.jpg]: /images/20211109/635c2b8d8bbb43b3bb334ea8248ebf41.png
[Bootstrap]: http://www.cnblogs.com/lhb25/archive/2012/07/26/bootstrap-documentation.html
[Web 1]: http://www.cnblogs.com/lhb25/tag/web/
[Skeleton]: http://www.getskeleton.com/
[9.jpg]: /images/20211109/1d289f4ed6024238a03eeeac4eecea54.png
[Kube]: http://imperavi.com/kube/
[10.jpg]: /images/20211109/32bcaa17a00048fdb14077733239c30b.png
[Helium]: https://github.com/cbrauckmuller/helium
[11.jpg]: /images/20211109/1ffd3d186d9848c08a07c2e488149b2d.png
[Markup]: http://www.markupframework.org/
[12.jpg]: /images/20211109/6ba7aae733a1492d9c3916cb54121c06.png
[Topcoat]: http://topcoat.io/
[13.jpg]: /images/20211109/424307cc33c64df2ba40b69ca281dfb4.png
[PureCSS]: http://purecss.io/
[SouthEast 1]: /images/20211109/4db84dee4ce948ccbbafa3a30cd67c31.png
[10]: http://www.cnblogs.com/lhb25/archive/2012/10/19/10-free-html-admin-templates.html
[8_ Web]: http://www.cnblogs.com/lhb25/archive/2012/06/18/8-useful-and-free-web-application-security-testing-tools.html
[60_ jQuery]: http://www.cnblogs.com/lhb25/archive/2011/05/31/2056103.html
[8_ HTML5 _ JavaScript]: http://www.cnblogs.com/lhb25/archive/2011/08/09/awesome-html5-and-javascript-effects.html
[35_ CSS3 _ HTML5]: http://www.cnblogs.com/lhb25/archive/2012/08/03/5-creative-html5-and-css3-templates.html
[14 Useful Responsive_Front-end Frameworks]: http://www.queness.com/post/14313/useful-front-end-frameworks-with-responsive-support
[_ _ _]: http://www.cnblogs.com/lhb25/