這個文章54it.com的小編做了一些整理和更新
若有版權問題請知會我刪除/變更
謝謝
目錄
0. 要求
1.EasyUI
2.DWZ JUI
3.H-UI
4.BUI
5.Ace Admin
6.Metronic
7.H+UI
8.Admin LTE
9.INSPINIA
10.LigerUI
11.其它UI
12.總結
要求:
1、美觀、大方、簡潔\開發快周期短容易部署
2、IE最低版本要兼容IE8、不考慮兼容IE6/IE7,Win7/IE8,XP/IE8,jQuery的版本不同,兼容性也不同,要注意選擇
3、能通過選項卡打開多個頁面,不想做單頁,iframe也沒關系
4、性能好,不要太笨重
5、基本在PC跑,手機終端少,界面太小,有沒有Bootstrap都可以
6、可復用。
一、EasyUI
官網:http://www.jeasyui.com/
有免費版,有商業版,商業版收費,幫助非常詳盡
資源:http://www.jeasyui.net/
easyui是國人的的作品,但服務器在國外,官網也是英文的,這個網站類似官網的中文版
easyui是一種基於jQuery的用戶界面插件集合。
easyui為創建現代化,互動,JavaScript應用程序,提供必要的功能。
使用easyui你不需要寫很多代碼,你只需要通過編寫一些簡單HTML標記,就可以定義用戶界面。
easyui是個完美支持HTML5網頁的完整框架。
easyui節省您網頁開發的時間和規模。
easyui很簡單但功能強大的。

優點:輕量、功能強大、免費、兼容性好、幫助詳細、使用的人多生態好
缺點:非響應式布局、某些系統看起來有點土(客戶與老板的感覺、認為與最新的那些響應式UI有差距)
獲得:搜索、網盤搜索大把被搭建好了基礎功能的框架,如動態的ASP/PHP/NET和JAVA等。
二、DWZ JUI
官網:http://jui.org/
下載:https://github.com/dwzteam/
特點:DWZ富客戶端框架(jQuery RIA framework), 是中國人自己開發的基於jQuery實現的Ajax RIA開源框架. 設計目標是簡單實用,快速開發,降低ajax開發成本。

三、HUI
H-ui前端框架是在bootstrap的基礎上基於 HTML、CSS、JAVASCRIPT開發的輕量級web前端框架
開源免費,簡單靈活,兼容性好,滿足大多數中國網站。
分了前端UI與后端UI。


官網:http://www.h-ui.net/H-ui.admin.shtml
后台:http://www.h-ui.net/
前台
下載:https://github.com/jackying/
缺點:感覺用的人少,名氣小,資料不全,配套組件不多,但國人的產品符合國人的口味。
四、BUI
阿里出品.BUI基於jQuery,兼容KISSY的UI類庫,專致於解決后台系統的框架方案
提供了豐富的DPL含有強大的控件庫對業務做了精細的分析。

下載:https://github.com/dxq613/bui
感覺也比較冷、與HUI有點類似的優點整體框架符合我的要求,但風格有種說不出的感覺。
五、Ace Admin
響應式Bootstrap網站后台管理系統模板,非常不錯的輕量級易用的admin后台管理系統
基於Bootstrap3,擁有強大的功能組件以及UI組件,基本能滿足后台管理系統的需求,而且能根據不同設備適配顯示,而且還有四個主題可以切換。
以前收費,最新版不再收費了。
下載:https://github.com/bopoda/ace



比較全,功能強大,組件多,美觀,只是用了很多不同的插件,兼容性不錯。
兼容的瀏覽器:
Internet Explorer 10
Internet Explorer 11
Internet Explorer 8
Internet Explorer 9
Latest Chrome
Latest Firefox
Latest Opera
Latest Safari
使用的插件:
使用到的插件並沒有分開存放,使用起來會麻煩一些。
另外該插件也被很多人簡化、修改成選項卡+iframe風格了。
小編的同事嘗試和后端動態結合,發現其左側菜單動態化較為麻煩,不像左右Iframe布局,整合起來代碼量比較大
而且是歐美人的風格,國人操作起來要逐步習慣.
六、Metronic
Metronic 基於強大的Bootstrap 框架實現。
擁有簡潔優雅的 Metro UI 風格界面,6 種顏色可選,76 個模板頁面,包括圖表、表格、地圖、消息中心、監控面板等后台管理項目所需的各種組件。

頁面規范、精致、細膩、美觀大方;功能強大、非常全;在所有我看到過的基於Bootstrap的網站模版中
Metronic是我認為最優秀的之一,其外觀之友好、功能之全面讓人驚嘆。
Metronic 是一個自適應的HTML模版,提供后台管理模版和前端內容網頁模版兩種風格。

優點:
支持HTML5 和 CSS3
自適應,基於響應式 Twitter Bootstrap框架,同時面向桌面電腦、平板、手機等終端。
整合AngularJS 框架。
可自定義管理面板,包括靈活的布局、主題、導航菜單、側邊欄等。
提供了部分電子商務模塊:CMS, CRM, SAAS。
多風格,提供了3個前端風格,7個后端管理面板風格。
簡潔扁平風格設計。
700多個網頁模版,1500多個UI小組件,100多個表單,80多個jQuery插件。
提供說明文檔。
缺點:
太大了,真的不知道從那里開始
對IE的兼容不好,雖然官方聲稱支持IE8,但我測試結果不支持
收費,價格是$28
七、H+ UI
收費998人民幣
完全響應式,基於Bootstrap3.3.6的扁平化主題
采用左右兩欄式布局,使用Html5+CSS3
提供了諸多的強大的可以重新組合的UI組件,集成jQuery(v2.1.4)
可以對她進行深度定制,以做出更強系統。

官網:http://www.zi-han.net/theme/hplus/
與Metronic與INSPINIA非常像,插件非常多,。
八、Admin LTE
基於Bootstrap 3.x免費主題,完全響應式管理模板。
高度可定制的,易於使用。
適合從小型移動設備到大的台式機很多的屏幕分辨率。

下載:https://github.com/almasaeed2010/AdminLTE (目前star 11652+)
預覽: http://almsaeedstudio.com/preview/
官網:Free Bootstrap Admin Template
瀏覽器支持:
IE 9+
Firefox (latest)
Chrome (latest)
Safari (latest)
Opera (latest)
插件:
特點:
響應式布局,支持多種設備
打印增強
豐富可排序的面板組件
18個插件與3個自定義插件
輕量、快速
兼容主流瀏覽器,IE8不兼容
支持Glyphicons, Fontawesome和Ion圖標
整體感覺與Metronic類似、功能強大,UI精致,被許多公司使用。
九、INSPINIA
收費$18。
基於平面設計理念的管理模板。
Bootstrap3 +HTML5和CSS3。
集成了jQuery插件。
用於所有類型的web應用程序自定義管理面板中,項目管理系統,管理儀表板,應用程序的后端,CMS或CRM。

與Metronic一樣,風格也比較像,個人認為比Metronic還要強大一些,頁面規范、精致、細膩、美觀大方;功能強大、非常全;在所有我看到過的基於Bootstrap的網站模版中,Metronic是我認為最優秀的之一,其外觀之友好、功能之全面讓人驚嘆。
瀏覽器兼容:
IE 9, 10, 11
Latest Chrome
Latest Firefox
Latest Opera
Latest Safari
演示地址:http://wrapbootstrap.com/preview/WB0R5L90S
特點:
相對Metronic准備了很多個版本,比如:
Static version, AngularJS, ASP.NET MVC5/MVC6, Meteor and Ruby on Rails version
插件很多,但都按引用分文件夾存放了,靜態版本中我看了就是48個插件,有PSD源文件
詳細介紹:https://wrapbootstrap.com/theme/inspinia-responsive-admin-theme-WB0R5L90S
十、LigerUI
LigerUI中國人開發的、免費。
基於jQuery 的UI框架,其核心設計目標是快速開發、使用簡單、功能強大、輕量級、易擴展。
簡單而又強大,致力於快速打造Web前端界面解決方案
可以應用於.net,jsp,php等等web服務器環境。


演示:http://www.ligerui.com/demo.html
特點:
使用簡單,輕量級
控件實用性強,功能覆蓋面大,可以解決大部分企業信息應用的設計場景
快速開發,使用LigerUI可以比傳統開發減少極大的代碼量
易擴展,包括默認參數、表單/表格編輯器、多語言支持等等
支持Java、.NET、PHP等web服務端
支持 IE6+、Chrome、FireFox等瀏覽器
開源,源碼框架層次簡單易懂。
API: http://api.ligerui.com/
演示地址: http://demo.ligerui.com/
源碼下載: http://git.oschina.net/ligerui/LigerUI/
技術支持: http://www.cnblogs.com/leoxie2011/
個人感覺文檔比較全,也有公司的信息系統使用了該UI
但整合感覺比不上EasyUI,與DotNet親一點感覺,
DWZ則與Java親近一些。
十一、其它UI

十二、總結
沒有形式就沒有內容、UI重要,特別是當客戶與老板不懂太多關於代碼、功能、性能的時候。
上面的UI你也許可以通過各種途徑獲得,但商業應用請慎重。
