前端開發框架有哪些

一個 前端開發框架其實就是一系列產品化的HTML/CSS/JavaScript組件的集合，咱們能夠在設計中使用它們。前端開發框架有不少，其中有一些寫得很棒。爲了你們的使用便利，下文列舉了目前最強大應用最普遍的幾款前端開發框架。記住，這些框架並不只僅是CSS 柵格之類的一些東西，它們包括的是整套的前端開發框架。

 

 

1. 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風格的組件加入到你的我的設計裏而且能夠方便地修改他們的屬性，簡單便捷。

 

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框架還提供了不少有用的擴展。

 

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

HTML模板 —— HTML模板能夠方便地用來快速建立頁面佈局。你所要作的僅僅是複製獲得模板代碼，而後丟到頁面的標籤之間就行了。

圖標字體（Icon Fonts） —— 包含自定義圖標的一種網頁字體。

SVG 社交網絡圖標（Social Icons）—— 一組不依賴分辨率的社交網絡圖標（可縮放矢量圖標）。

響應式表格——Foundation框架中響應式表格的實現機制是固定表格的左邊第一列，而後表格的其餘列能夠經過滾動條拖拉進行訪問。

關閉帆布佈局（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以及模塊）。

 

 

如何選擇一款優秀的前端開發框架？

 

能夠根據如下評估標準：

 

將根據如下標準對這些框架進行評估：

 

學習曲線

針對簡單任務的開發效率

針對複雜、特殊任務的開發效率

依賴管理

代碼性能/安全優化調整的能力

平臺升級/冗餘能力

在企業市場中的認同度

開發、使用SOAP和REST服務的複雜性

 

總結：

靈活運用框架，將會獲得意想不到的效果。這個看怎麼靈活運用，有好的方案你們分享一下共同窗習，進步。

學習前端，重在分享！