在做web開(kāi)發(fā)的時(shí)候經(jīng)常會(huì)遇到一個(gè)問(wèn)題，那就是，選擇什么樣的框架來(lái)做前端開(kāi)發(fā)。下面封程中把目前常用的一些前端的框架簡(jiǎn)單的給大家介紹一下.

1. Bootstrap

Boostrap絕對(duì)是目前最流行用得最廣泛的一款框架。它是一套優(yōu)美，直觀并且給力的web設(shè)計(jì)工具包，可以用來(lái)開(kāi)發(fā)跨瀏覽器兼容并且美觀大氣的頁(yè)面。它提供了很多流行的樣式簡(jiǎn)潔的UI組件，柵格系統(tǒng)以及一些常用的JavaScript插件。

Bootstrap是用動(dòng)態(tài)語(yǔ)言LESS寫(xiě)的，主要包括四部分的內(nèi)容：

腳手架——全局樣式，響應(yīng)式的12列柵格布局系統(tǒng)。記住Bootstrap在默認(rèn)情況下并不包括響應(yīng)式布局的功能。因此，如果你的設(shè)計(jì)需要實(shí)現(xiàn)響應(yīng)式布局，那么你需要手動(dòng)開(kāi)啟這項(xiàng)功能。
基礎(chǔ)CSS——包括基礎(chǔ)的HTML頁(yè)面要素，比如表格(table)，表單(form)，按鈕(button)，以及圖片(image)，基礎(chǔ)CSS為這些要素提供了優(yōu)雅，一致的多種樣式。
組件——收集了大量可以重用的組件，如下拉菜單（dropdowns），按鈕組（button groups），導(dǎo)航面板（navigation control）——包括：tabs,pills,lists標(biāo)簽，面包屑導(dǎo)航（breadcrumbs）以及頁(yè)碼（pagination），縮略圖(thumbnails)，進(jìn)度條（progress bars），媒體對(duì)象（media objects）等等。
JavaScript——包括一系列jQuery的插件，這些插件可以實(shí)現(xiàn)組件的動(dòng)態(tài)頁(yè)面效果。插件主要包括模態(tài)窗口（modals），提示效果（tool tips），“泡芙”效果（popovers），滾動(dòng)監(jiān)控（scrollspy），旋轉(zhuǎn)木馬(carousel)，輸入提示(typeahead)，等等。

Bootstrap已經(jīng)足夠強(qiáng)大，能夠?qū)崿F(xiàn)各種形式的 Web 界面。為了更加方便地利用Bootstrap進(jìn)行開(kāi)發(fā)，很多工具和資源可以用來(lái)配合使用，下面列舉了其中的一部分工具和資源。

jQuery UI Bootstrap —— 對(duì)于jQuery和Bootstrap愛(ài)好者來(lái)說(shuō)這是個(gè)非常好的資源，能夠把 Bootstrap的清爽界面組件引入到j(luò)Query UI中。
jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主題類(lèi)似，這是一個(gè)為jQuery mobile建立的主題。如果你想讓用Bootstrap開(kāi)發(fā)的網(wǎng)站在手機(jī)端也可以優(yōu)雅訪問(wèn)，那么這個(gè)資源對(duì)你來(lái)說(shuō)很方便易用。
Fuel UX —— 它為Bootstrap添加了一些輕量的JavaScript控件。Fuel UI 安裝，修改，更新以及優(yōu)化都很簡(jiǎn)單方便。
StyleBootstrap.info —— Bootstrap提供了自己的幾種界面風(fēng)格，StyleBootstrap提供了更多的配色選項(xiàng)，并且你可以給每個(gè)組件都應(yīng)用不同的配色。
BootSwatchr —— 利用這個(gè)工具你可以立刻查看主題修改后的效果。對(duì)于每一次變動(dòng)的效果，這個(gè)應(yīng)用都會(huì)生成一個(gè)唯一的URL方便你與他人分享，你也可以在任意時(shí)刻修改你的主題。
Bootswatch —— 提供大量免費(fèi)的Bootstrap主題。
Bootsnipp —— 在線前端框架交互組件制作工具，是一個(gè)供給設(shè)計(jì)師和開(kāi)發(fā)者的基于Bootstrap HTML/CSS/JavaScript 架構(gòu)的免費(fèi)元素。
LayoutIt —— 通過(guò)界面拖放生成器簡(jiǎn)便快捷地創(chuàng)建基于Bootstrap的前端代碼。通過(guò)拖放動(dòng)作將Bootstrap風(fēng)格的組件加入到你的個(gè)人設(shè)計(jì)里并且可以方便地修改他們的屬性，簡(jiǎn)單便捷。

2、flex

Apache基金會(huì)發(fā)布了Flex 4.8版本，這是Adobe將Flex捐獻(xiàn)給Apache基金會(huì)后發(fā)布的第一個(gè)版本。

需要注意的是

2014年03月10日，Apache Flex技術(shù)社區(qū)發(fā)布了全新的Apache Flex 4.12.0版本，該版本是Apache Flex 4.11.0的升級(jí)版本，改進(jìn)的功能包括：
◆支持最新版本的Flash Player
◆支持最新的AIR運(yùn)行時(shí)
◆改進(jìn)了內(nèi)存占用和性能
◆改善了針對(duì)移動(dòng)平臺(tái)的組件的樣式
◆支持iOS7系統(tǒng)
◆修復(fù)了超過(guò)80個(gè)漏洞[4]
2014年05月10日，Apache對(duì)4.12.0版本進(jìn)行優(yōu)化改進(jìn)，發(fā)布了Flex 4.12.1，新版本加入對(duì)全新Flash Player及Air運(yùn)行時(shí)的支持，改進(jìn)對(duì)移動(dòng)媒體查詢的支持，并修復(fù)20多個(gè)Bug。

3、extjs

ExtJS是一種主要用于創(chuàng)建前端用戶界面，是一個(gè)基本與后臺(tái)技術(shù)無(wú)關(guān)的前端ajax框架。

功能豐富，無(wú)人能出其右。

無(wú)論是界面之美，還是功能之強(qiáng)，ext的表格控件都高居榜首。

extjs官網(wǎng)：http://extjs.org.cn/

華麗的界面，靈活的功能，還有開(kāi)發(fā)工具都是配套的，但有個(gè)最大的問(wèn)題，用就得花錢(qián)！

4、easyui

easyui幫助你構(gòu)建你的web應(yīng)用更加容易。

它是一個(gè)基于jquery的插件，開(kāi)發(fā)出來(lái)的一套輕量級(jí)的ui框架，非常小巧而且功能豐富。

官方網(wǎng)站是：

http://www.jeasyui.com/

但是她有一個(gè)最大的問(wèn)題就是代碼只能找到以前的開(kāi)源的版本，到了1.2以后的版本源代碼都是經(jīng)過(guò)混淆的，如果遇到問(wèn)題修改起來(lái)會(huì)非常麻煩！不過(guò)一個(gè)比較大的優(yōu)勢(shì)是開(kāi)源免費(fèi)，并且界面做的還說(shuō)的過(guò)去！

5、MiniUI

又一個(gè)基于jquery的框架，開(kāi)發(fā)的界面功能都很豐富。

jQuery MiniUI – 快速開(kāi)發(fā)WebUI。

它能縮短開(kāi)發(fā)時(shí)間，減少代碼量，使開(kāi)發(fā)者更專(zhuān)注于業(yè)務(wù)和服務(wù)端，輕松實(shí)現(xiàn)界面開(kāi)發(fā)，帶來(lái)絕佳的用戶體驗(yàn)。

使用MiniUI，開(kāi)發(fā)者可以快速創(chuàng)建Ajax無(wú)刷新、B/S快速錄入數(shù)據(jù)、CRUD、Master-Detail、菜單工具欄、彈出面板、布局導(dǎo)航、數(shù)據(jù)驗(yàn)證、分頁(yè)表格、樹(shù)、樹(shù)形表格等典型WEB應(yīng)用系統(tǒng)界面。

界面做的挺不錯(cuò)，功能也挺豐富，但是有兩個(gè)比較大的問(wèn)題，一個(gè)是收費(fèi)，一個(gè)是沒(méi)有源碼，說(shuō)白了，不開(kāi)源！基于這個(gè)開(kāi)發(fā)如果想對(duì)功能做擴(kuò)展就需要找他們的團(tuán)隊(duì)進(jìn)行升級(jí)！

6、jQuery UI

jQuery UI 是一套 jQuery 的頁(yè)面 UI 插件，包含很多種常用的頁(yè)面空間，例如 Tabs（如本站首頁(yè)右上角部分） 、拉簾效果（本站首頁(yè)左上角）、對(duì)話框、拖放效果、日期選擇、顏色選擇、數(shù)據(jù)排序、窗體大小調(diào)整等等非常多的內(nèi)容。

功能非常全面，界面也挺漂亮的，可以整體使用，也可以分開(kāi)使用其中的幾個(gè)模塊，免費(fèi)開(kāi)源！

7、DWZ

DWZ富客戶端框架(jQuery RIA framework), 是中國(guó)人自己開(kāi)發(fā)的基于jQuery實(shí)現(xiàn)的Ajax RIA開(kāi)源框架.

設(shè)計(jì)目標(biāo)是簡(jiǎn)單實(shí)用,快速開(kāi)發(fā),降低ajax開(kāi)發(fā)成本。

歡迎大家提出建議，我們將在下一版本中進(jìn)一步調(diào)整和完善功能．共同推進(jìn)國(guó)內(nèi)整體ajax開(kāi)發(fā)水平。

DWZ論壇 http://bbs.dwzjs.com

在線演示地址 http://demo.dwzjs.com

畢竟是國(guó)產(chǎn)的，支持一下，而且源碼完全公開(kāi)，可以選擇一下！不過(guò)性能怎么樣不敢確定！

8、GWT

Google 網(wǎng)頁(yè)工具包——GWT 提供了一組基于Java語(yǔ)言的開(kāi)發(fā)包，這個(gè)開(kāi)發(fā)包的設(shè)計(jì)參考Java AWT包設(shè)計(jì)，類(lèi)命名規(guī)則、接口設(shè)計(jì)、事件監(jiān)聽(tīng)等都和AWT非常類(lèi)似。熟悉Java AWT的開(kāi)發(fā)者不需要花費(fèi)多大的力氣就能夠快速的理解GWT開(kāi)發(fā)工具包，將更多地時(shí)間投入到GWT應(yīng)用的開(kāi)發(fā)過(guò)程中。

你不用去了解這樣那樣的javascript框架，通過(guò)java你就可以寫(xiě)出功能豐富的界面，可以做單元測(cè)試，畢竟是google的產(chǎn)品，嚴(yán)重支持一下！

9、YUI

Yahoo! UI Library (YUI) 是一個(gè)開(kāi)放源代碼的 JavaScript 函數(shù)庫(kù)，為了能建立一個(gè)高互動(dòng)的網(wǎng)頁(yè)，它采用了AJAX, DHTML 和 DOM 等程式碼技術(shù)。它也包含了許多 CSS 資源。使用授權(quán)為 BSD許可證，基本上沒(méi)怎么研究過(guò)！

YUI Compressor倒是挺出名的，這套UI庫(kù)不知道應(yīng)用的情況怎么樣！

10、Sencha

Sencha 是由 ExtJS、jQTouch 以及 Raphael 三個(gè)項(xiàng)目合并而成的一個(gè)新項(xiàng)目。

大公司的框架，并且是幾樣庫(kù)的強(qiáng)強(qiáng)聯(lián)合，值得推薦！

11、Dojo

在國(guó)內(nèi)應(yīng)用好像不是很廣，不過(guò)性能上應(yīng)該沒(méi)問(wèn)題。

Dojo是一個(gè)用javascript語(yǔ)言實(shí)現(xiàn)的開(kāi)源DHTML工具包。

有多個(gè)基金會(huì)的支持，包括IBM和SUN，都是軟件界的泰斗，值得信賴！

12、ZK

ZK是 一套以 AJAX/XUL/Java 為基礎(chǔ)的網(wǎng)頁(yè)應(yīng)用程式開(kāi)發(fā)框架，用于豐富網(wǎng)頁(yè)應(yīng)用程式的使用接口。最大的好處是，在設(shè)計(jì)AJAX網(wǎng)絡(luò)應(yīng)用程式時(shí)，輕松簡(jiǎn)便的操作就像設(shè)計(jì)桌面程式一樣。 ZK包含了一個(gè)以AJAX為基礎(chǔ)、事件驅(qū)動(dòng)（event-driven）、高互動(dòng)性的引擎，同時(shí)還提供了多樣豐富、可重復(fù)使用的XUL與HTML組件，以 及以 XML 為基礎(chǔ)的使用接口設(shè)計(jì)語(yǔ)言 ZK User-interfaces Markup Language (ZUML)。

在線的demo

設(shè)計(jì)器的demo

日歷組件

功能豐富，全面，文檔齊全，而且升級(jí)了很多次，非常值得推薦！

13、OperaMasks-UI

OperaMasks- UI是OperaMasks團(tuán)隊(duì) 2011下半年打造的一款輕量級(jí)前端JS組件庫(kù)，旨在提供一款學(xué)習(xí)曲線低、定制性靈活、樣式統(tǒng)一，且多瀏覽器支持、覆蓋企業(yè)業(yè)務(wù)場(chǎng)景的前端 JavaScript UI組件庫(kù)。目前，該團(tuán)隊(duì)已將這一產(chǎn)品以LGPL 開(kāi)源協(xié)議開(kāi)放給社區(qū)。

文檔豐富，功能齊全，而且很容易使用和開(kāi)發(fā)！而且是國(guó)產(chǎn)的喲！

14、JavaFX

Sun 公司(已于2009年被Oracle公司收購(gòu))在2008年12月05日發(fā)布了JavaFX技術(shù)的正式版,它使您能利用 JavaFX 編程語(yǔ)言開(kāi)發(fā)富互聯(lián)網(wǎng)應(yīng)用程序(RIA)。JavaFX Script 編程語(yǔ)言（以下稱為JavaFX）是Sun微系統(tǒng)公司開(kāi)發(fā)的一種declarative, statically typed(聲明性的、靜態(tài)類(lèi)型)腳本語(yǔ)言。JavaFX技術(shù)有著良好的前景，包括可以直接調(diào)用Java API的能力。因?yàn)?JavaFX Script是靜態(tài)類(lèi)型，它同樣具有結(jié)構(gòu)化代碼、重用性和封裝性，如包、類(lèi)、繼承和單獨(dú)編譯和發(fā)布單元，這些特性使得使用Java技術(shù)創(chuàng)建和管理大型程序 變?yōu)榭赡堋?/p>

不管用的人多少，畢竟是從sun開(kāi)始，現(xiàn)在是oracle，相信會(huì)有一個(gè)廣闊的市場(chǎng)，但是確實(shí)不知道有哪個(gè)公司用這個(gè)框架開(kāi)發(fā)！

目前國(guó)內(nèi)常見(jiàn)、并且強(qiáng)大實(shí)用的web前端開(kāi)發(fā)框架就是這些,希望通過(guò)我的整理可以幫助到大家.

注明本文鏈接:http://fcz8k.com/webframe/384.html