一(yī)個前端開(kāi)發框架其實就是一(yī)系列産品化的HTML/CSS/JavaScript組件的集合，我(wǒ)(wǒ)們可以在設計中(zhōng)使用它們。前端開(kāi)發框架有很多，其中(zhōng)有一(yī)些寫得很棒。爲了大(dà)家的使用便利，下(xià)文列舉了目前最強大(dà)應用最廣泛的幾款前端開(kāi)發框架。記住，這些框架并不僅僅是CSS 栅格之類的一(yī)些東西，它們包括的是整套的前端開(kāi)發框架。
1. Bootstrap
Boostrap絕對是目前最流行用得最廣泛的一(yī)款框架。它是一(yī)套優美，直觀并且給力的web設計工(gōng)具包，可以用來開(kāi)發跨浏覽器兼容并且美觀大(dà)氣的頁面。它提供了很多流行的樣式簡潔的UI組件，栅格系統以及一(yī)些常用的JavaScript插件。
Bootstrap是用動态語言LESS寫的，主要包括四部分(fēn)的内容：
腳手架——全局樣式，響應式的12列栅格布局系統。記住Bootstrap在默認情況下(xià)并不包括響應式布局的功能。因此，如果你的設計需要實現響應式布局，那麽你需要手動開(kāi)啓這項功能。
基礎CSS——包括基礎的HTML頁面要素，比如表格(table)，表單(form)，按鈕(button)，以及圖片(image)，基礎CSS爲這些要素提供了優雅，一(yī)緻的多種樣式。
組件——收集了大(dà)量可以重用的組件，如下(xià)拉菜單（dropdowns），按鈕組（button groups），導航面闆（navigation control）——包括：tabs,pills,lists标簽，面包屑導航（breadcrumbs）以及頁碼（pagination），縮略圖(thumbnails)，進度條（progress bars），媒體(tǐ)對象（media objects）等等。
JavaScript——包括一(yī)系列jQuery的插件，這些插件可以實現組件的動态頁面效果。插件主要包括模态窗口（modals），提示效果（tool tips），“泡芙”效果（popovers），滾動監控（scrollspy），旋轉木馬(carousel)，輸入提示(typeahead)，等等。
Bootstrap已經足夠強大(dà)，能夠實現各種形式的 Web 界面。爲了更加方便地利用Bootstrap進行開(kāi)發，很多工(gōng)具和資(zī)源可以用來配合使用，下(xià)面列舉了其中(zhōng)的一(yī)部分(fēn)工(gōng)具和資(zī)源。
jQuery UI Bootstrap —— 對于jQuery和Bootstrap愛好者來說這是個非常好的資(zī)源，能夠把 Bootstrap的清爽界面組件引入到jQuery UI中(zhōng)。
jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主題類似，這是一(yī)個爲jQuery mobile建立的主題。如果你想讓用Bootstrap開(kāi)發的網站在手機端也可以優雅訪問，那麽這個資(zī)源對你來說很方便易用。
Fuel UX —— 它爲Bootstrap添加了一(yī)些輕量的JavaScript控件。Fuel UI 安裝，修改，更新以及優化都很簡單方便。
StyleBootstrap.info —— Bootstrap提供了自己的幾種界面風格，StyleBootstrap提供了更多的配色選項，并且你可以給每個組件都應用不同的配色。
BootSwatchr —— 利用這個工(gōng)具你可以立刻查看主題修改後的效果。對于每一(yī)次變動的效果，這個應用都會生(shēng)成一(yī)個唯一(yī)的URL方便你與他人分(fēn)享，你也可以在任意時刻修改你的主題。
Bootswatch —— 提供大(dà)量免費(fèi)的Bootstrap主題。
Bootsnipp —— 在線前端框架交互組件制作工(gōng)具，是一(yī)個供給設計師和開(kāi)發者的基于Bootstrap HTML/CSS/JavaScript 架構的免費(fèi)元素。
LayoutIt —— 通過界面拖放(fàng)生(shēng)成器簡便快捷地創建基于Bootstrap的前端代碼。通過拖放(fàng)動作将Bootstrap風格的組件加入到你的個人設計裏并且可以方便地修改他們的屬性，簡單便捷。
2. Fbootstrapp
Fbootstrapp基于Bootstrap并且提供了跟Facebook iframe apps和設計相同的功能。包含用于所有标準組件的基本的CSS和HTML，包括排版、表單、按鈕、表格、栅格、導航等等，風格與Facebook類似。
3. BootMetro
BootMetro框架的靈感來自于Metro UI CSS，基于Bootstrap 框架構建，用于創建Windows 8 的Metro風格的網站。它包括所有Bootstrap的功能，并添加了幾個額外(wài)的功能，比如頁面平鋪，應用程序欄等等。
4. Kickstrap
Kickstrap是Bootstrap的一(yī)個變體(tǐ)。它基于Bootstrap，并在它的基礎上添加了許多app，主題以及附加功能。這使得這個框架可以單獨地用于構建網站，而不需要額外(wài)安裝什麽。你需要做的僅僅是把它放(fàng)到你的網站上，然後用就可以了。
App 是一(yī)些頁面加載完成之後加載運行的JavaScript和CSS打包文件。默認加載的app有Knockout.js, Retina.js, Firebug Lite, and Updater，你也可以自行添加更多的app。
選擇不同的主題可以讓你的網站在衆多Bootstrap構建的類似網站中(zhōng)顯得與衆不同。
附加功能是一(yī)些用來擴展Bootstrap UI 庫的附件，它們的語法基本相同或者相似。
5. Foundation
Foundation 是一(yī)款強大(dà)的，功能豐富的并且支持響應式布局的前端開(kāi)發框架，你可以通過Foundation快速創建原型，利用它所包含的大(dà)量布局框架，元素以及最優範例快速創建在各種設備上可以正常運行的網站以及app。Foundation在構建的時候秉承移動優先的策略，它擁有大(dà)量實用的語義化功能，并且使用Zepto類庫來取代jQuery，這樣可以帶來更好的用戶體(tǐ)驗，并且提高運行的速度。
Foundation擁有一(yī)套12列的靈活可嵌套的網格系統，你可以用它快速創建适應多種浏覽設備的布局。它有很多的功能。它定義了很多的樣式，比如字體(tǐ)排版，按鈕，表單，以及多種多樣的導航控件。它也提供了很多的CSS組件，例如操作面闆（panels），價格表（price tables），進度條（progress bars），表格（tables）以及可以适應不同設備的可伸縮視頻(pín)（flex video）。與此同時，Foundation還包括了很多的JavaScript插件，如下(xià)拉菜單（dropdowns），joyride（網站功能引導插件），magellan（網站固定導航插件），orbit（支持觸摸的響應式圖片輪播插件），reveal（彈出框插件），sections（強大(dà)的tab插件）以及tooltips（工(gōng)具提示）等。
Foundation框架還提供了很多有用的擴展。
A、模闆（Stencils）——Foundation框架中(zhōng)的所有UI元素都有Omnigraffle stencils以及矢量PDF兩種格式的下(xià)載，你可以用它們來方便快捷的繪制線框圖和原型圖。
B、HTML模闆 —— HTML模闆可以方便地用來快速創建頁面布局。你所要做的僅僅是複制得到模闆代碼，然後丢到頁面的标簽之間就好了。
C、圖标字體(tǐ)（Icon Fonts） —— 包含自定義圖标的一(yī)種網頁字體(tǐ)。
D、SVG 社交網絡圖标（Social Icons）—— 一(yī)組不依賴分(fēn)辨率的社交網絡圖标（可縮放(fàng)矢量圖标）。
E、響應式表格——Foundation框架中(zhōng)響應式表格的實現機制是固定表格的左邊第一(yī)列，然後表格的其他列可以通過滾動條拖拉進行訪問。
F、關閉帆布布局（Off-Canvas Layouts）—— 這些布局可以允許一(yī)些網頁内容或者導航控件在移動端設備上默認隐藏，當浏覽屏幕變大(dà)或者用戶進行相應操作的時候這些内容再出現。當用戶進行相關操作的時候，網頁内容或者導航控件将會滑動出現。
如你所見，對于web開(kāi)發者以及設計師來說，Foundation就像是一(yī)個巨大(dà)的寶藏。在下(xià)載框架的時候，你可以自定義下(xià)載框架的内容。
6. GroundworkCSS
GroundworkCSS 是前端框架家族裏面新添的一(yī)款小(xiǎo)清新框架。它是基于Sass和Compass的一(yī)個高級響應式的HTML5，CSS以及JavaScript工(gōng)具包，可以用于快速創建原型并且建立在各種浏覽設備上可以正常工(gōng)作的網站和app。
GroundworkCSS擁有一(yī)個靈活，可嵌套的流式網格系統，方便你創建任何布局。這個框架有很多讓人印象深刻的功能，比如在平闆以及移動端上的網格系統，當屏幕的寬度小(xiǎo)于768或者480像素時，頁面中(zhōng)原本并列排版的表格列（grid column）會自動變爲獨立的行，而不是折疊在一(yī)起。另一(yī)個很酷的功能是jQuery的響應式文本（ResponsiveText）插件，這個插件可以動态調整頁面文字的大(dà)小(xiǎo)以适應浏覽設備的屏幕大(dà)小(xiǎo)。這個插件對于可伸縮的标題以及創建響應式表格的時候特别有用。
GroundworkCSS包含了大(dà)量的UI組件，如tabs、響應式數據表格導航、按鈕、表單、響應式導航控件、tiles（一(yī)套替代radio按鈕以及其他默認表單元素的優雅組件）、工(gōng)具提示、對話(huà)框、Cycle2（一(yī)款強大(dà)的，響應式的内容滑塊）以及其他很多的有用組件。它還提供了很多矢量社交網絡圖标以及圖标字體(tǐ)。
你可以通過切換頁面上方的導航按鈕選擇不同的浏覽設備要來查看這款框架的效果。通過這種方式，你可以測試在不同的浏覽設備上各種組件的響應式布局情況。
GroundworkCSS的文檔寫的非常好，并且包含着很多的示例，爲了讓你更快的上手，他還提供了多種響應式的模闆。對于這款框架，唯一(yī)我(wǒ)(wǒ)可以想到的缺點就是不能自定義要下(xià)載的框架内容。
7. Gumby
Gumby 是一(yī)款基于Sass和Compass的簡單靈活并且穩定的前端開(kāi)發框架。它的流式-固定布局（fluid-fixed layout）可以根據桌面端以及移動設備的分(fēn)辨率自動優化要呈現的網頁内容。它支持多種網格布局，包括多列混雜(zá)的嵌套模式。Gumby提供兩套PSD的模闆，方便你在12列和16列的網格系統上進行設計。
Gumby提供了一(yī)個功能豐富的UI工(gōng)具包，包括按鈕，表單，移動端導航，tabs，跳轉鏈接（skip links），撥動開(kāi)關（toggles and switches，可以方便快捷地切換元素的class，而不需要進行額外(wài)的js操作），抽屜功能（drawers），響應式圖片以及retina圖片等等。爲了緊跟最近的設計潮流，Gumby的UI元素中(zhōng)還包括了Metro風格的扁平化設計，你也可以用Pretty風格的漸變設計，或者按照你的想法糅合兩種設計風格。該框架還提供了一(yī)套出衆的響應式，擁有獨立分(fēn)辨率的Entypo圖标，你可以在自己的web項目中(zhōng)盡情使用。Gumby有一(yī)個很好自定義下(xià)載選擇器，你可以自行配置各個組件的顔色，并且按自己的需求方便地下(xià)載。
8. HTML KickStart
HTML Kickstart 是一(yī)款可以用來方便創建任何布局的集合HTML5，CSS和jQuery的工(gōng)具包。它提供了幹淨，符合标準以及跨浏覽器兼容的代碼。這款框架提供了多種樣式表，包括網格，排版，表單，按鈕，表格，列表以及一(yī)些跨浏覽器兼容的web組件比如JavaScript的幻燈片功能，tabs，面包屑導航，包含子菜單的菜單以及工(gōng)具提示等等。你可以使用99Lime UIKIT提供的UI組件來搭建你的産品線框圖。
9. IVORY
IVORY 是一(yī)款輕量，簡單但是強大(dà)的前端框架，可以用于320到1200像素寬度的響應式布局。它基于12列的響應式網格布局，包含表格，按鈕，表格，分(fēn)頁，撥動開(kāi)關，工(gōng)具提示，手風琴，選項卡等網站中(zhōng)常用的組件和樣式。
當你需要一(yī)款輕量靈活，不需要額外(wài)的其他功能，并且适應不同浏覽設備的框架時，IVORY是你最好的選擇。
10.Kube
最後，如果你的新項目需要一(yī)款實在的，不需要複雜(zá)的額外(wài)功能組件的，足夠簡單的框架，那麽 Kube 将會是你正确的選擇。Kube是一(yī)款最小(xiǎo)化的，支持響應式的前端框架，它沒有強加的樣式設計，因此給了你充分(fēn)的自由來開(kāi)發自己的樣式表。它提供了一(yī)些web元素的基本樣式，比如網格，表單，排版，表格，按鈕，導航，鏈接以及圖片等等。
Kube框架包括一(yī)個簡潔的CSS文件用于方便地創建響應式布局，還包括了兩個JS文件來完成tab以及頁面的按鈕操作。如果你希望得到Kube最大(dà)化的靈活性以及個性化定制，那麽你可以下(xià)載開(kāi)發者版本（developer version），這個版本包括了LESS文件（包括各種變量，mixins以及模塊）。
