好程式設計師web前端乾貨之web前端開發框架彙總

　　好程式設計師 web 前端乾貨之 web 前端開發框架彙總，其實 一個前端開發框架其實就是一系列產品化的 HTML/CSS/JavaScript 元件的集合，我們可以在設計中使用它們。前端開發框架有很多，其中有一些寫得很棒。為了 讓 大家 看的更明白 ，下文列舉了目前應用最廣泛的幾款前端開發框架。記住，這些框架並不僅僅是 CSS 柵格之類的一些東西，它們包括的是整套的前端開發框架。

　　 一、 Bootstrap

　　 Boostrap 絕對是目前最流行用得最廣泛的一款框架。它是一套優美，直觀並且給力的 Web 設計工具包，可以用來開發跨瀏覽器相容並且美觀大氣的頁面。它提供了很多流行的樣式簡潔的 UI 元件，柵格系統以及一些常用的 JavaScript 外掛。

　　 Bootstrap 是用動態語言 LESS 寫的，主要包括四部分的內容：

　　 腳手架 ——全域性樣式，響應式的 12 列柵格佈局系統。記住 Bootstrap 在預設情況下並不包括響應式佈局的功能。因此，如果你的設計需要實現響應式佈局，那麼你需要手動開啟這項功能。

　　 基礎 CSS ——包括基礎的 HTML 頁面要素，比如表格 (table) ，表單 (form) ，按鈕 (button) ，以及圖片 (image) ，基礎 CSS 為這些要素提供了優雅，一致的多種樣式。

　　 元件 ——收集了大量可以重用的元件，如下拉選單 (dropdowns) ，按鈕組 (button groups) ，導航皮膚 (navigation control) ——包括： tabs,pills,lists 標籤，麵包屑導航 (breadcrumbs) 以及頁碼 (pagination) ，縮圖 (thumbnails) ，進度條 (progress bars) ，媒體物件 (media objects) 等等。

　　 JavaScript ——包括一系列 jQuery 的外掛，這些外掛可以實現元件的動態頁面效果。外掛主要包括模態視窗 (modals) ，提示效果 (tool tips) ，“泡芙”效果 (popovers) ，滾動監控 (scrollspy) ，旋轉木馬 (carousel) ，輸入提示 (typeahead) ，等等。

　　 Bootstrap 已經足夠強大，能夠實現各種形式的 Web 介面。為了更加方便地利用 Bootstrap 進行開發，很多工具和資源可以用來配合使用，下面列舉了其中的一部分工具和資源。

　　 jQuery UI Bootstrap —— 對於 jQuery 和 Bootstrap 愛好者來說這是個非常好的資源，能夠把 Bootstrap 的清爽介面元件引入到 jQuery UI 中。

　　 jQuery Mobile Bootstrap Theme —— 和上面提到的 jQuery UI 主題類似，這是一個為 jQuery Mobile 建立的主題。如果你想讓用 Bootstrap 開發的網站在手機端也可以優雅訪問，那麼這個資源對你來說很方便易用。

　　 Fuel UX —— 它為 Bootstrap 新增了一些輕量的 JavaScript 控制元件。 Fuel UI 安裝，修改，更新以及最佳化都很簡單方便。

　　 StyleBootstrap.info —— Bootstrap 提供了自己的幾種介面風格， StyleBootstrap 提供了更多的配色選項，並且你可以給每個元件都應用不同的配色。

　　 BootSwatchr —— 利用這個工具你可以立刻檢視主題修改後的效果。對於每一次變動的效果，這個應用都會生成一個唯一的 URL 方便你與他人分享，你也可以在任意時刻修改你的主題。

　　 Bootswatch —— 提供大量免費的 Bootstrap 主題。

　　 Bootsnipp —— 線上前端框架互動元件製作工具，是一個供給設計師和開發者的基於 Bootstrap HTML/CSS/JavaScript 架構的免費元素。

　　 LayoutIt —— 透過介面拖放生成器簡便快捷地建立基於 Bootstrap 的前端程式碼。透過拖放動作將 Bootstrap 風格的元件加入到你的個人設計裡並且可以方便地修改他們的屬性，簡單便捷。

　　 二、 Fbootstrapp

　　 Fbootstrapp 基於 Bootstrap 並且提供了跟 Facebook iframe apps 和設計相同的功能。包含用於所有標準元件的基本的 CSS 和 HTML ，包括排版、表單、按鈕、表格、柵格、導航等等，風格與 Facebook 類似。

　　 三、 BootMetro

　　 BootMetro 框架的靈感來自於 Metro UI CSS ，基於 Bootstrap 框架構建，用於建立 Windows 8 的 Metro 風格的網站。它包括所有 Bootstrap 的功能，並新增了幾個額外的功能，比如頁面平鋪，應用程式欄等等。

　　 四、 Kickstrap

　　 Kickstrap 是 Bootstrap 的一個變體。它基於 Bootstrap ，並在它的基礎上新增了許多 app ，主題以及附加功能。這使得這個框架可以單獨地用於構建網站，而不需要額外安裝什麼。你需要做的僅僅是把它放到你的網站上，然後用就可以了。

　　 App 是一些頁面載入完成之後載入執行的 JavaScript 和 CSS 打包檔案。預設載入的 app 有 Knockout.js, Retina.js, Firebug Lite, and Updater ，你也可以自行新增更多的 app 。

　　 選擇不同的主題可以讓你的網站在眾多 Bootstrap 構建的類似網站中顯得與眾不同。

　　 附加功能是一些用來擴充套件 Bootstrap UI 庫的附件，它們的語法基本相同或者相似。

　　 五、 Foundation

　　 Foundation 是一款強大的，功能豐富的並且支援響應式佈局的前端開發框架，你可以透過 Foundation 快速建立原型，利用它所包含的大量佈局框架，元素以及最優範例快速建立在各種裝置上可以正常執行的網站以及 app 。 Foundation 在構建的時候秉承移動優先的策略，它擁有大量實用的語義化功能，並且使用 Zepto 類庫來取代 jQuery ，這樣可以帶來更好的使用者體驗，並且提高執行的速度。

　　 Foundation 擁有一套 12 列的靈活可巢狀的網格系統，你可以用它快速建立適應多種瀏覽裝置的佈局。它有很多的功能。它定義了很多的樣式，比如字型排版，按鈕，表單，以及多種多樣的導航控制元件。它也提供了很多的 CSS 元件，例如操作皮膚 (panels) ，價格表 (price tables) ，進度條 (progress bars) ，表格 (tables) 以及可以適應不同裝置的可伸縮影片 (flex video) 。與此同時， Foundation 還包括了很多的 JavaScript 外掛，如下拉選單 (dropdowns) ， joyride( 網站功能引導外掛 ) ， magellan( 網站固定導航外掛 ) ， orbit( 支援觸控的響應式圖片輪播外掛 ) ， reveal( 彈出框外掛 ) ， sections( 強大的 tab 外掛 ) 以及 tooltips( 工具提示 ) 等。

　　 Foundation 框架還提供了很多有用的擴充套件。

　　 模板 (Stencils) —— Foundation 框架中的所有 UI 元素都有 Omnigraffle stencils 以及向量 PDF 兩種格式的下載，你可以用它們來方便快捷的繪製線框圖和原型圖。

　　 HTML 模板 —— HTML 模板可以方便地用來快速建立頁面佈局。你所要做的僅僅是複製得到模板程式碼，然後丟到頁面的標籤之間就好了。

　　 圖示字型 (Icon Fonts) —— 包含自定義圖示的一種網頁字型。

　　 SVG 社交網路圖示 (Social Icons) —— 一組不依賴解析度的社交網路圖示 ( 可縮放向量圖示 ) 。

　　 響應式表格 —— Foundation 框架中響應式表格的實現機制是固定表格的左邊第一列，然後表格的其他列可以透過捲軸拖拉進行訪問。

　　 關閉帆布佈局 (Off-Canvas Layouts) —— 這些佈局可以允許一些網頁內容或者導航控制元件在移動端裝置上預設隱藏，當瀏覽螢幕變大或者使用者進行相應操作的時候這些內容再出現。當使用者進行相關操作的時候，網頁內容或者導航控制元件將會滑動出現。

　　 如你所見，對於 Web 開發者以及設計師來說， Foundation 就像是一個巨大的寶藏。在下載框架的時候，你可以自定義下載框架的內容。

　　 六、 GroundworkCSS

　　 GroundworkCSS 是前端框架家族裡面新添的一款小清新框架。它是基於 Sass 和 Compass 的一個高階響應式的 HTML5 ， CSS 以及 JavaScript 工具包，可以用於快速建立原型並且建立在各種瀏覽裝置上可以正常工作的網站和 app 。

　　 GroundworkCSS 擁有一個靈活，可巢狀的流式網格系統，方便你建立任何佈局。這個框架有很多讓人印象深刻的功能，比如在平板以及移動端上的網格系統，當螢幕的寬度小於 768 或者 480 畫素時，頁面中原本並列排版的表格列 (grid column) 會自動變為獨立的行，而不是摺疊在一起。另一個很酷的功能是 jQuery 的響應式文字 (ResponsiveText) 外掛，這個外掛可以動態調整頁面文字的大小以適應瀏覽裝置的螢幕大小。這個外掛對於可伸縮的標題以及建立響應式表格的時候特別有用。

　　 GroundworkCSS 包含了大量的 UI 元件，如 tabs 、響應式資料表格導航、按鈕、表單、響應式導航控制元件、 tiles( 一套替代 radio 按鈕以及其他預設表單元素的優雅元件 ) 、工具提示、對話方塊、 Cycle2( 一款強大的，響應式的內容滑塊 ) 以及其他很多的有用元件。它還提供了很多向量社交網路圖示以及圖示字型。

　　 你可以透過切換頁面上方的導航按鈕選擇不同的瀏覽裝置要來檢視這款框架的效果。透過這種方式，你可以測試在不同的瀏覽裝置上各種元件的響應式佈局情況。

　　 GroundworkCSS 的文件寫的非常好，並且包含著很多的示例，為了讓你更快的上手，他還提供了多種響應式的模板。對於這款框架，唯一我可以想到的缺點就是不能自定義要下載的框架內容。

　　 七、 Gumby

　　 Gumby 是一款基於 Sass 和 Compass 的簡單靈活並且穩定的前端開發框架。

　　 它的流式 - 固定佈局 (fluid-fixed layout) 可以根據桌面端以及移動裝置的解析度自動最佳化要呈現的網頁內容。它支援多種網格佈局，包括多列混雜的巢狀模式。 Gumby 提供兩套 PSD 的模板，方便你在 12 列和 16 列的網格系統上進行設計。

　　 Gumby 提供了一個功能豐富的 UI 工具包，包括按鈕，表單，移動端導航， tabs ，跳轉連結 (skip links) ，撥動開關 (toggles and switches ，可以方便快捷地切換元素的 class ，而不需要進行額外的 js 操作 ) ，抽屜功能 (drawers) ，響應式圖片以及 retina 圖片等等。為了緊跟最近的設計潮流， Gumby 的 UI 元素中還包括了 Metro 風格的扁平化設計，你也可以用 Pretty 風格的漸變設計，或者按照你的想法糅合兩種設計風格。該框架還提供了一套出眾的響應式，擁有獨立解析度的 Entypo 圖示，你可以在自己的 Web 專案中盡情使用。

　　 Gumby 有一個很好自定義下載選擇器，你可以自行配置各個元件的顏色，並且按自己的需求方便地下載。

　　 八、 HTML KickStart

　　 HTML Kickstart 是一款可以用來方便建立任何佈局的集合 HTML5 ， CSS 和 jQuery 的工具包。它提供了乾淨，符合標準以及跨瀏覽器相容的程式碼。

　　 這款框架提供了多種樣式表，包括網格，排版，表單，按鈕，表格，列表以及一些跨瀏覽器相容的 Web 元件比如 JavaScript 的幻燈片功能， tabs ，麵包屑導航，包含子選單的選單以及工具提示等等。

　　 你可以使用 99Lime UIKIT 提供的 UI 元件來搭建你的產品線框圖。

　　 九、 IVORY

　　 IVORY 是一款輕量，簡單但是強大的前端框架，可以用於 320 到 1200 畫素寬度的響應式佈局。它基於 12 列的響應式網格佈局，包含表格，按鈕，表格，分頁，撥動開關，工具提示，手風琴，選項卡等網站中常用的元件和樣式。

　　 當你需要一款輕量靈活，不需要額外的其他功能，並且適應不同瀏覽裝置的框架時， IVORY 是你最好的選擇。

　　 十、 Kube

　　 最後，如果你的新專案需要一款實在的，不需要複雜的額外功能元件的，足夠簡單的框架，那麼 Kube 將會是你正確的選擇。 Kube 是一款最小化的，支援響應式的前端框架，它沒有強加的樣式設計，因此給了你充分的自由來開發自己的樣式表。它提供了一些 Web 元素的基本樣式，比如網格，表單，排版，表格，按鈕，導航，連結以及圖片等等。

　　 Kube 框架包括一個簡潔的 CSS 檔案用於方便地建立響應式佈局，還包括了兩個 JS 檔案來完成 tab 以及頁面的按鈕操作。如果你希望得到 Kube 最大化的靈活性以及個性化定製，那麼你可以下載開發者版本 (developer version) ，這個版本包括了 LESS 檔案 ( 包括各種變數， mixins 以及模組 ) 。

　　 希望本篇文章能夠對正在從事 Web 前端工作的小夥伴們有所幫助。