目前主流的JavaScript框架排名中，jQuery和 Ext 可算是佼佼者，獲得了使用者的廣泛好評。國內的一些框架很多也是仿照 jQuery 對 JavaScript 進行了包裝，不過這些框架的鼻祖 YUI 還是堅持用自己的 JavaScript 類庫。

   jQuery 是目前用的最多的前端 JavaScript 類庫，據初步統計，目前 jQuery 的佔有率已經超過 46%，它算是比較輕量級的類庫，對 DOM 的操作也比較方便到位，支援的效果和控制元件也很多。同時，基於 jQuery 有很多擴充套件專案，包括 jQuery UI(jQuery 支援的一些控制元件和效果框架)、jQuery Mobile(移動端的 jQuery 框架)、QUnit(JavaScript 的

   Ext 是 Sencha 公司推崇的 JavaScript 類庫，相比 jQuery，Ext JS 更重量級，動輒數兆的檔案，使得 Ext 在外網使用的時候會顧慮很多。但是，另一方面，在 Ext JS 龐大的檔案背後是 Ext JS 強大的功能。Ext JS 的控制元件和功能可以說強大和華麗到了讓人髮指的程度。圖表、選單、特效，Ext JS 的控制元件庫非常豐富，同時它的互動也非常強大，獨立靠 Ext JS 幾乎就可以取代控制層完成於客戶的互動。強大的功能，豐富的控制元件庫，華麗的效果也使得 Ext JS 成為內網開發利器。

   框架鼻祖 YUI 也有自己的 JavaScript 類庫，DOM 操作和效果處理也還比較方便，功能和控制元件也很齊全，但是相比 jQuery 和 Ext JS 顯得比較中庸一些。隨著 Yahoo!的沒落，YUI 的呼聲也逐漸被新起的框架淹沒，想來也讓人惋惜。

1. Bootstrap

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. Fbootstrapp

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

3. BootMetro

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

4. Kickstrap

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

App 是一些頁面載入完成之後載入執行的JavaScript和CSS打包檔案。預設載入的app有Knockout.js, Retina.js, Firebug Lite, and Updater，你也可以自行新增更多的app。選擇不同的主題可以讓你的網站在眾多Bootstrap構建的類似網站中顯得與眾不同。附加功能是一些用來擴充套件Bootstrap UI 庫的附件，它們的語法基本相同或者相似。

5. 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框架還提供了很多有用的擴充套件。

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

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

C、圖示字型（Icon Fonts） —— 包含自定義圖示的一種網頁字型。

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

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

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

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

6. GroundworkCSS

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

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

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

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

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

7. 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有一個很好自定義下載選擇器，你可以自行配置各個元件的顏色，並且按自己的需求方便地下載。

8. HTML KickStart

  HTML Kickstart 是一款可以用來方便建立任何佈局的集合Html5，CSS和jQuery的工具包。它提供了乾淨，符合標準以及跨瀏覽器相容的程式碼。這款框架提供了多種樣式表，包括網格，排版，表單，按鈕，表格，列表以及一些跨瀏覽器相容的web元件比如JavaScript的幻燈片功能，tabs，麵包屑導航，包含子選單的選單以及工具提示等等。你可以使用99Lime UIKIT提供的UI元件來搭建你的產品線框圖。

9. IVORY

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

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

10.Kube

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

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