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

您所在的位置：程序员俱乐部 > 编程开发 > .NET > 【特别推荐】14个支持响应式设计的流行前端开发框架

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

2013/8/7 18:08:26 梦想天空（山边小溪）博客园我要评论(0)

摘要：在几年前，并没有真正意义上的前端开发。随着网络技术的发展，网站和Web应用程序变得越来越复杂，前端部分的工作独立出来逐渐成为现在的前端开发。如今，我们可以看到越来越多的公司在招聘前端开发岗位。前端开发并不容易，除了掌握基本的HTML、CSS和Javascript之外，因为不同版本的浏览器和平台，你需要知道如何做一个跨浏览器的网站。而最新的发展趋势——响应式设计，它不仅使Web项目开发更难，也需要花费更多的开发时间。不过，有很多优秀的框架可以帮助到你
标签：开发设计

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

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

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

您可能感兴趣的相关文章

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

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

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

InK

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

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

GroundworkCSS

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

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

Ivory

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

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

Foundation

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

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

Grumby

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

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

HTML KickStart

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

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

Maxmertkit

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

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

Twitter Bootstrap

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

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

Skeleton

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

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

Kube

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

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

Helium

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

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

Markup

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

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

Topcoat

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

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

PureCSS

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