端開發比設計和程序都要難做在于，要做好前端需要對設計和程序都有些許了解，當然這個只是額外需要了解的，主要還需要精通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已成為眾多設計者和開發者最喜歡的快速開發工具?，F在已經有很多第三方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。”

我：“老板讓我問你的?！?/p>

大雄：“我幫你把界面做好，你能幫我把這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時不是還給你那個消息推送啊?！?/p>

好吧，還是得自己來做，那個清高的大濕只會罵我的時候話多一點。。。

動態加載要做到以下幾步：

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鍵以后得到的結果是一樣的。

運行一下，咦，怎么界面上啥東西都沒有？我擦，忘了在數據庫里添加幾個測試菜單，當然是空的了。

三分鐘后。。。

“大雄，大雄！??！好啦！可以啦?！?/p>

怎么沒人了？一看時間兩點多了。。。還得加幾個功能頁面進去才可以做demo

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