首页 > 网页教程 > CSS > 14款响应式布局的前端开发框架推荐

14款响应式布局的前端开发框架推荐

时间:2014-02-18    来源:虾米站长

前端开发并不是一个容易的工作,不仅需要掌握HTML、CSS和JavaScript,针对不同的浏览器版本和平台,还需要了解如何设计出跨平台的网站。如今随着响应式设计的流行,前端开发变得越来越困难,且花费的时间更长。

本文收集了14个响应式前端开发框架,可以帮助前端开发人员大大简化开发过程。针对每个框架,文中均指出了它所包含的UI组件及JavaScript插件。几乎所有的框架都采用了响应式网格系统。

使用这些前端框架,有如下好处:

  • 跨浏览器。这一点已被证实。
  • 一致性。UI组件,如导航、按钮、标签、表单、下拉框、表格……,在设计上保持风格一致。
  • 快速开发。你可以快速、容易地构建布局。这些框架都配有详细的说明文档。
  • 响应式。所有CSS组件及JavaScript插件可以很好地从桌面过渡到移动设备上。

InK

响应式 前端开发 前端开发框架

Ink为一个界面工具包,用于快速开发Web界面,具有易于使用、易于扩展特点。它可以为构建布局提供解决方案,可以展示普通的界面元素,可以实现以内容为中心、对用户友好的交互方式。

  • HTML&CSS:布局、导航、排版、图标、表单、提示框、表格 
  • JS:Gallery、表格、树视图、排序列表、日期选择插件、制表符、表单验证及一些行为(停靠、折叠、关闭)
  • 其他:Sass Mixins

 GroundworkCSS Beta

响应式 前端开发 前端开发框架

GroundworkCSS是一个基于Sass预处理器的开源项目 ,主要用于快速构建响应式Web应用程序。拥有一个灵活的、可嵌套的网格系统,可以创建适应多种浏览设备的布局。GroundworkCSS还提供多种UI 组件,如导航、按钮、图标、表单、Tabs、对话框、工具提示等等。

  • HTML&CSS:网格、布局、排版、按键、标题、表单、图标、社交图标、响应式文本、对话框、工具提示
  • JS:导航、制表符(Tab)、提示框、Cycle2
  • 其他:Sass Mixins

 Ivory

响应式 前端开发 前端开发框架

这是一个灵活、强大的响应式Web框架,使Web开发更快速、更简单。

  • HTML&CSS:网格、排版、表单、按钮、提示框、页码、面包屑导航(breadcrumb)、列表、表格
  • JS:提示框、制表符(Tab)、切换开关(Toggle switch)、折叠

 ZURB

响应式 前端开发 前端开发框架

Foundation由ZURB公司设计,ZURB是一家产品设计公司,位于加州坎贝尔。Foundation为最先进的响应式前端开发框架,它拥有很多布局模板、CSS样式表及自己开发的优秀JavaScript插件。

  • HTML&CSS:网格、布局模板、图标字体、响应式表格、SVG格式的社交图标、页码、面包屑导航(breadcrumbs)、侧导航、按键、排版、标签、提示框、面板、价格表、进度栏、表格、缩略图
  • JS:下拉按钮、拆分按钮、转换开关、Flex视频、灯箱、下拉、响应式布局(通过转换图片大小来实现)、旅游导航、麦哲伦全局导航(Magellan Sticky Nav)、Orbit图片滑动幻灯片插件等
  • 其他:可定制皮肤表单(Custom Skinned Forms)、SCSS Mixin

 Grumby

响应式 前端开发 前端开发框架

Gumby 2基于Sass开发。Sass为功能强大的CSS预处理器,利用它可以快速开发Gumby。

  • HTML&CSS:网格、表单、按钮、导航、标签、Entypo图标
  • JS:下拉、浮窗、制表符(Tab)、开关与转换(Toggles & Switches)
  • 其他:可定制皮肤表单(Custom Skinned Forms)、SASS和Compass

相关推荐
Cikonss:基于CSS创建响应式的图标字体插件介绍
CSS与响应性设计的未来及改进设想
17款超棒的前端开发响应式开发框架推荐
什么是响应式网页设计?响应式布局的实现原理
10款提升工作效率的响应式页面设计工具推荐
8个超棒的创建响应式网页设计框架推荐
WEB前端开发应该注意的问题8点(原创技巧)
网页前端开发:微博CSS3适用细节初探
CSS3新手入门教程:快乐的CSS3之旅!
8个CSS3前端开发必备的实用在线帮助手册
9种网页设计有用的CSS3属性和使用技巧
高效CSS开发需要注意的要点以及提升性能的做法
8款网页前端开发有用的优秀CSS工具分享
Web前端开发框架Twitter BootStrap推荐
koala:LESS/Sass前端预处理器语言图形编译工具
前端开发框架Bootstrap3.0新手入门学习系列教程
前端开发框架Bootstrap3.0学习教程之入门篇
前端开发框架Bootstrap3.0学习教程之栅格系统原理
前端开发框架Bootstrap3.0学习教程之栅格系统案例
2015年最受欢迎开源前端框架盘点TOP 20
20款设计师和web开发人员最爱的开源CSS框架推荐
GOLD Bootstrap:支付黄金比例排版的CSS框架
三款CSS框架介绍:YAML、Blueprintcss、Elements
27款优秀的CSS框架推荐
CSS框架到底有那些优点与缺点?
20个免费CSS框架推荐 网页设计web开发必备
Bootstrap:知名的开源前端框架中文翻译版上线

分类导航

教程推荐

热门特效

热门教程