端开发比设计和程序都要难做在于，要做好前端需要对设计和程序都有些许了解，当然这个只是额外需要了解的，主要还需要精通html，css，javascript，jQuery，响应式布局，移动网页布局等经验，当然时刻关注web前端技术也不可少，下面介绍了15款流行的响应式css框架。

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

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

使用这些前端框架，有如下好处：

• 跨浏览器。这一点已被证实。

• 一致性。UI组件，如导航、按钮、标签、表单、下拉框、表格……，在设计上保持风格一致。

• 快速开发。你可以快速、容易地构建布局。这些框架都配有详细的说明文档。

• 响应式。所有CSS组件及JavaScript插件可以很好地从桌面过渡到移动设备上。

快切css

快切css是由切图网推出的一款响应式css框架——Quickcss，最早10年就推出了，算是国内css框架鼻祖了，后经过不断衍化，逐步完善了不足之处，它的最大特色在于简单易用，和兼容性强，兼容ie6+，firefox，chrome等浏览器和移动设备。

http://kuai.qietu.com

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

HTML KickStart

该框架集合了HTML5、CSS和JavaScript，帮助开发人员快速开发Web产品。它覆盖了所有UI组件，同时也包含一些有用的JavaScript插件。

• HTML&CSS：网格、排版按钮、列表、表格、图标、面包屑导航、图片、表单

• JS：菜单、代码高亮插件、制表符（Tab）、幻灯片播放、表单验证

• 其他：CSS帮助文档

Maxmertkit

Maxmertkit拥有完整的文档，包含大量实例，并且提供了拖拽生成代码的功能。

• HTML&CSS：网格、布局、徽章、按钮、表单、图标、标签、菜单、进度栏、表格、下拉、工具提示

• JS：按钮、旋转木马、通知、弹出框、滚动条、制表符（Tab）

• 其他： Sass、Coffee脚本语言

Twitter Bootstrap

大家对Twitter Bootstrap已十分熟悉了。凭借全面的UI组件、易用的网格和组件，Bootstrap已成为众多设计者和开发者最喜欢的快速开发工具。现在已经有很多第三方Bootstrap程序和JavaScript插件可供使用。

• HTML&CSS：网格、布局、排版、编码、表格、表单、按键、图片、图标、按钮组、导航、面包屑导航、页码、标签、徽章、缩略图、提示框、进度栏

• JS：模态窗口（Modals）、提示效果（Tool Tips）、“泡芙”效果（Popovers）、滚动监控（Scrollspy）、旋转木马（Carousel）、输入提示（Typeahead）等等。

• 其他：定制器（Customizer）、 LESS CSS

Skeleton

Skeleton 是一个小的JS和CSS文件集合，可帮你快速开发漂亮的网站，适合各种屏幕设备，包括手机。Skeleton基于960 Grid开发，是一个UI框架。

• HTML&CSS：GRid、排版、按钮、表单、媒体查询（Media Queries）

Kube

Kube是一款最小化的，支持响应式的前端框架，包括一个简洁的CSS文件，用于方便地创建响应式布局，包括了两个JS文件来完成Tab以及页面的按钮操作。

• HTML&CSS：排版、网格、表单、表格、按钮、导航、图标

• JS：按钮、制表符（Tab）

• 其他： LESS CSS

Helium

Helium是一个前端响应式Web框架，使用HTML5、CSS3快速制作原型以及开发产品。Helium很像Twitter Bootstrap和ZURB Foundation，事实上，Helium使用了两者不少的代码。但与这两个框架不同的是，Helium设计更加轻量级，而且更容易修改。Helium只有30KB左右，而Bootstrap有100KB，ZURB有200多KB。

• HTML&CSS：网格、按钮、排版、表单

• JS：下拉、表单验证

• 其他：Sass、Compass

The Markup Framework

Markup是一套集布局、小组件、UI组件和字体排版样式为一体的框架。它可以作为你设计自己网站的起点。

• HTML&CSS：布局、网格、排版、表单、按钮、面包屑导航、导航列表、导航菜单

• JS：没有JavaScripts，只有单纯的CSS

Topcoat

TopCoat是一套免费的开源UI元素类库，整套类库不使用任何JavaScript，而是使用CSS和HTML来生成。

• HTML&CSS：图标、字体、按键、面包屑导航、表单、下拉、滑动开关、选择、滚动条、切换按钮

• JS：没有JavaScripts，只有单纯的CSS

PureCSS

Pure是一个相当小的框架，压缩及最小化后仅有5.7KB。它没有使用任何JavaScript，只是HTML和CSS。该CSS框架为响应式布局，采用模块化结构，每个模块的样式可以单独使用。

• HTML&CSS：网格、排版、表单、按键、表格、菜单

• JS：没有JavaScripts，只有单纯的CSS

• 其他：程序皮肤制作工具（Skin Builder）、YU 库。

结论

根据你的需要，选择可以与设计相匹配的框架。我们不应该根据框架来构建网站，因为它会很大程度上限制设计者的思维。

如果前端设计/布局不是那么重要，那么我们可以选择使用某一框架。（编译：陈秋歌/责编：夏梦竹）

原文来自：queness.com

切图网是国内网页前端开发服务领跑者，提供专业的网页切图前端开发服务。

、坑爹的老板

“我X！这个项目是要商业应用的，你还想用easyUI,500美刀的授权费用。一个项目才赚多少钱！赶紧给我换了，明天去客户那边要做demo的，今天晚上必须给我赶出来！不懂的去问大雄”黄总对我又是一通大吼。

我容易嘛我，以前做CS架构系统的，现在突然让我转BS，前端开发实在太费力了。更要命的是还碰上一个SB坑爹的小老板。公司一共就三个人，老板（抠得要死，不知道怎么讨到老婆的）、大雄（大湿级攻城湿，BS前端开发大牛）、我（屌丝码农）。

二、开工搞起

好吧，老板都发话了，自己重做吧，啥都要搞免费的，怕侵犯别人版权，自己下的片全是正版的么？现在的人啊。。。发再多的牢骚也没用，UI还是得自己写，先弄个好看点的主界面吧，里面的功能随便糊弄下数据库都懒得连。。这次要做的demo是一个后台管理系统，菜单导航做成手风琴的会显得比较大方。那就做成手风琴的吧。经过网上一番搜索，我决定把菜单导航做成下面这个样子

问题来了，上面这个界面是很好看，关键是我不会做呀！那我这个菜鸟只好向大雄大师求教了。

我：“大雄，这个导航菜单怎么做？”

大雄：“没时间，我在改BUG。”

我：“老板让我问你的。”

大雄：“我帮你把界面做好，你能帮我把这250个BUG和需求全改掉？明天就要，多谢你了”

我：“唉，我有个女同学让我帮忙介绍个男朋友”

大雄：“刚好我现在有时间，我先帮你弄”

大雄过来看了一眼我同学的照片说：“网址不是都有了么，自己按F12，什么都有的，我忙去了。。。”

我了个去什么人呀，看人家长得抽象点就撂挑子了，那就F12吧，

擦！F12真是个好东西呀，按一下什么html标记、css样式全有了。原来所谓的前端大湿也不过如此嘛！

不断的ctrl+C、和ctrl+v后，自己再写了点js脚本的我的界面出来啦！！！！完全实现了左侧树状导航，点击完导航在右侧以选项卡的形式打开标签。

这里跟大家分享一下主要思路：

1）每个菜单按钮其实就是一个div,子菜单就是上级div里嵌套div。div真的是个好东西，里面什么东西都能放，菜单图标，样式都可以很好的控制。

2）右侧以选项卡方式打开标签其实是给div加了个onclick事件点击以后在右侧有两个动作：1、加一个iframe,里面放页面内容。2、加一个标签跟页面对应，可以控制页面的显示隐藏和关闭。

附打标签选项卡代码

//=================动态菜单tab标签========================
function AddTabMenu(tabid, url, name, img, Isclose, IsReplace) {
SetSystemId(tabid);
if (url == "" || url == "#") {
url = "/ErrorPage/404.aspx";
}
var tabs_container = top.$("#tabs_container");
var ContentPannel = top.$("#ContentPannel");
if (IsReplace == 'true') {
top.RemoveDiv(tabid);
}
if (Isclose != 'false') { //判断是否带关闭tab
top.$(".navigation").hide();
} else {
top.$(".navigation").show();
}
if (top.document.getElementById("tabs_" + tabid) == null) { //如果当前tabid存在直接显示已经打开的tab
Loading(true);
tabs_container.find('li').removeClass('selected');
ContentPannel.find('iframe').hide();
if (Isclose != 'false') { //判断是否带关闭tab
" + name + "
");

} else {
" + name + "
");

}
ContentPannel.append("");
}
else {
tabs_container.find('li').removeClass('selected');
ContentPannel.find('iframe').hide();
tabs_container.find('#tabs_' + tabid).addClass('selected');
top.document.getElementById("tabs_iframe_" + tabid).style.display = 'block';
}
}
//关闭当前tab
function ThisCloseTab() {
var tabs_container = top.$("#tabs_container");
top.RemoveDiv(tabs_container.find('.selected').attr('id').substr(5));
}
//关闭事件
function RemoveDiv(obj) {
var tabs_container = top.$("#tabs_container");
var ContentPannel = top.$("#ContentPannel");
tabs_container.find("#tabs_" + obj).remove();
ContentPannel.find("#tabs_iframe_" + obj).remove();
var tablist = tabs_container.find('li');
var pannellist = ContentPannel.find('iframe');
if (tablist.length > 0) {
tablist[tablist.length - 1].className = 'selected';
pannellist[tablist.length - 1].style.display = 'block';
}
if (tablist.length == '1') {
top.$(".navigation").show();
}
}

三、举一反三

我：“大雄，原来做前端就是这么简单呀，套套js和样式，P两张好看点的图，找几张图片，什么样的界面出不来呀”

大雄：“可不就是这么简单么，只是你太SB而已，到现在才明白”

好吧！你牛，我TM把你以前那两套UI前端界面也仿出来，不就是F12么，我js好歹还是会点的。半小时后。。。

四、动态加载

“哦耶耶，你之前弄的那几套风格的界面都让我扒过来了”

大雄：“哟！我穿过的，都让你给扒了，不错嘛，名师出高徒呀”

我：“狗P名湿，你教我啥啦？”

大雄：“F12呀，对了你那个菜单能动态加载吗？”

我：“动态加载？html的怎么动态加载？”

大雄：“你SB呀，你不知道用JS从后台获取菜单数据，然后自动拼接出菜单来，再加载，不就动态了么？会个F12就这么嚣张了”

我：“JS里面可以拼接html,你怎么不早讲，什么东西都藏着掖着的”

大雄：“我这么忙，你不问我，我怎么知道你想要什么，你当我是websocket时不是还给你那个消息推送啊。”

好吧，还是得自己来做，那个清高的大湿只会骂我的时候话多一点。。。

动态加载要做到以下几步：

1、要在数据库里建立菜单，表结构如下：

主要字段介绍：

ParentID:父级主键，正确的带出多级下拉菜单。

Img:图片路径，前台加载时根据路径加载菜单图标，使菜单看起来更加漂亮。

SortCode:菜单显示的顺序。

2、通过jquery调用ajax调用数据库，从数据库中把菜单的父节点，图片地址、排序方式等调出来，这种后台代码大家都熟就不做详细描述了。

3、页面载入时动态加载，根据ajax方法返回的json数据动态拼接html代码，就跟我们平时写C#代码一样，就是拼接个动态字符串，代码如下

function resizeLayout() {
resizeU();
$(window).resize(resizeU);
function resizeU() {
var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu');
$(".sub-menu").css('height', $(".navigation").height() - 19 - accordion_head.length * accordion_head.height() - accordion_head.length + 'px');
accordion_head.first().addClass('active').next().slideDown('normal');
accordion_head.on('click', function (event) {
event.preventDefault();
if ($(this).attr('class') != 'active') {
accordion_body.slideUp('normal');
$(this).next().stop(true, true).slideToggle('normal');
accordion_head.removeClass('active');
$(this).addClass('active');
}
});
}
}
//手风琴导航菜单
var AccordionMenuJson = "";
function GetAccordionMenu() {
var index = 0;
var html = "";
getAjax("Frame.ashx", "action=LoadFirstMenu", function (data) {
AccordionMenuJson = eval("(" + data + ")");
$.each(AccordionMenuJson, function (i) {
if (AccordionMenuJson[i].ParentId == '9f8ce93a-fc2d-4914-a59c-a6b49494108f') {
if (index == 0) {
<a style="\"border-top:" 0px="" solid="" #ccc;\"="">" + AccordionMenuJson[i].FullName + "";

} else {
" + AccordionMenuJson[i].FullName + "";

}
html += GetSubmenu(AccordionMenuJson[i].MenuId);
html += "";
index++;
}
});
})
$(".accordion").append(html);
}
//子菜单
function GetSubmenu(MenuId) {
var html = "";
html += "
";
$.each(AccordionMenuJson, function (i) {
if (AccordionMenuJson[i].ParentId == MenuId) {
}
});
html += "";
return html;
}

后台的拼接出这些代码以后，就跟我们按F12键以后得到的结果是一样的。

运行一下，咦，怎么界面上啥东西都没有？我擦，忘了在数据库里添加几个测试菜单，当然是空的了。

三分钟后。。。

“大雄，大雄！！！好啦！可以啦。”

怎么没人了？一看时间两点多了。。。还得加几个功能页面进去才可以做demo

唉，苦逼的程序猿伤不起呀。。。。。