后台管理UI的選擇

目錄

• 一、EasyUI
• 二、DWZ JUI
• 三、HUI
• 四、BUI
• 五、Ace Admin
• 六、Metronic
• 七、H+ UI
• 八、Admin LTE
• 九、INSPINIA
• 十、LigerUI
• 十一、FineUI
• 十二、其它UI
• 十三、總結下下載

最近要做一個企業的OA系統，以前一直使用EasyUI，一切都好，但感覺有點土了，想換成現在流行的Bootstrap為基礎的后台UI風格，想滿足的條件應該達到如下幾個：

1、美觀、大方、簡潔

2、兼容IE8、不考慮兼容IE6/IE7，因為現在還有很多公司在使用Win7系統，系統內置了IE8

3、能通過選項卡打開多個頁面，不想做單頁，iframe也沒關系

4、性能好，不要太笨重

5、最好以Bootstrap為基礎

6、還希望在以后別的系統中能夠復用。

一次次反復糾結的選擇開始了，給大家介紹下我考慮過的UI，也給大家一個參考。

一、EasyUI

easyui是一種基於jQuery的用戶界面插件集合。

easyui為創建現代化，互動，JavaScript應用程序，提供必要的功能。

使用easyui你不需要寫很多代碼，你只需要通過編寫一些簡單HTML標記，就可以定義用戶界面。

easyui是個完美支持HTML5網頁的完整框架。

easyui節省您網頁開發的時間和規模。

easyui很簡單但功能強大的。

優點：輕量、功能強大、免費、兼容性好、幫助詳細、使用的人多生態好

缺點：非響應式布局、某些系統看起來有點土（客戶與老板的感覺、確實與最新的那些UI有差距）

獲得：上網搜索、網盤搜索大把被搭建好了基礎功能的框架。下載

下載后大家可以替換成最新的1.5版的easyui

官網：http://www.jeasyui.com/，有免費版，有商業版，商業版收費，幫助非常詳盡

資源：http://www.jeasyui.net/，easyui是國人的的作品，但服務器在國外，官網也是英文的，這個網站類似官網的中文版

二、DWZ JUI

特點：DWZ富客戶端框架(jQuery RIA framework), 是中國人自己開發的基於jQuery實現的Ajax RIA開源框架. 設計目標是簡單實用,快速開發,降低ajax開發成本。

官網：http://jui.org/

下載：https://github.com/dwzteam/

三、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類庫，專致於解決后台系統的框架方案，BUI提供了豐富的DPL含有強大的控件庫對業務做了精細的分析。

官網：http://www.builive.com/

下載：https://github.com/dxq613/bui

感覺也比較冷、與HUI有點類似的優點整體框架符合我的要求，但風格有種說不出的感覺。

五、Ace Admin

響應式Bootstrap網站后台管理系統模板ace admin，非常不錯的輕量級易用的admin后台管理系統，基於Bootstrap3，擁有強大的功能組件以及UI組件，基本能滿足后台管理系統的需求，而且能根據不同設備適配顯示，而且還有四個主題可以切換。以前收費，好像最新版不再收費了。

下載：https://github.com/bopoda/ace

官網：http://ace.jeka.by/

感覺比較全，功能強大,組件多，美觀，只是用了很多不同的插件，兼容性不錯。

兼容的瀏覽器：

• Internet Explorer 10
• Internet Explorer 11
• Internet Explorer 8
• Internet Explorer 9
• Latest Chrome
• Latest Firefox
• Latest Opera
• Latest Safari

使用的插件：

jQuery 2.0.3 jQuery UI 1.10.3 (Custom Build) Twitter Bootstrap 3.0.0 FontAwesome 3.2.1 Google "Open Sans" Font jQuery Flot Charts 0.8.1 jQuery Sparklines 2.1.2 Easy Pie Chart 1.2.5 jQuery Knob 1.2.0 jQuery Validate 1.11.1 FuelUX 2.3.0 (Spinner & Wizard & Treeview) FullCalendar 1.6.4 jQuery ColorBox 1.4.27 jQuery dataTables 1.9.4 jQuery Chosen 1.0 jQuery Masked Input 1.3.1 jQuery Input Limiter 1.3.1 jQuery AutoSize 1.17.7 Bootstrap Colorpicker Bootstrap Datepicker Bootstrap Timepicker v0.2.3 Bootstrap DateRange Picker 1.2 Bootbox.js 4.0.0 jQuery Gritter 1.7.4 jQuery slimScroll 1.1.1 Spin.js 1.3.0 jQuery UI Touch Punch 0.2.2 Google Code Prettify ExplorerCanvas Mindmup Wysiwyg Editor Toopay Markdown Editor 1.1.4 X-editable 1.4.6 Select2 3.4.2 Bootstrap Tags 2.2.5 jQuery Mobile 1.3.2 (Custom Build) jqGrid 4.5.2 Dropzone.js 3.0 Nestable lists plugin

 

使用到的插件並沒有分開存放，使用起來會麻煩一些。

另外該插件也被很多人簡化、修改成選項卡+iframe風格了。

六、Metronic

Metronic 是一套精美的響應式后台管理模板，基於強大的 Twitter Bootstrap 框架實現。Metronic 擁有簡潔優雅的 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

官網的介紹：H+是一個完全響應式，基於Bootstrap3.3.6最新版本開發的扁平化主題，她采用了主流的左右兩欄式布局，使用了Html5+CSS3等現代技術，她提供了諸多的強大的可以重新組合的UI組件，並集成了最新的jQuery版本(v2.1.4)，當然，也集成了很多功能強大，用途廣泛的jQuery插件，她可以用於所有的Web應用程序，如網站管理后台，網站會員中心，CMS，CRM，OA等等，當然，您也可以對她進行深度定制，以做出更強系統。

官網：http://www.zi-han.net/theme/hplus/

與Metronic與INSPINIA非常像，插件非常多，收費998人民幣。

八、Admin LTE

AdminLTE 是一個基於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)

插件：

Boostrap Slider
Ion slider
Bootstrap WYSIHTML5
CKEditor
Bootstrap Colorpicker
Bootstrap Date range Picker
Bootstrap Time Picker
Data Tables
Flot
Morris.js
Sparkilne
Full Calendar
iCheck
jQuery input mask
jQuery Knob
jVector Map
Slim Scroll
Pace
Bootstrap Social Buttons

特點：

• 響應式布局，支持多種設備
• 打印增強
• 豐富可排序的面板組件
• 18個插件與3個自定義插件
• 輕量、快速
• 兼容主流瀏覽器，IE8不兼容
• 支持Glyphicons, Fontawesome和Ion圖標

整體感覺與Metronic類似、功能強大，UI精致，被許多公司使用。

評論中感謝網友（dotNetDR_、醉丶千秋）推薦，確定是值得關注的一個UI。

九、INSPINIA

INSPINIA是平面設計理念的管理模板。它是充分響應的由Bootstrap3 +框架開發的模板,HTML5和CSS3。它有很多可重用的UI組件和集成了最新的jQuery插件。它可以用於所有類型的web應用程序自定義管理面板中,項目管理系統,管理儀表板,應用程序的后端,CMS或CRM。

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

瀏覽器兼容：

• IE 9, 10, 11
• Latest Chrome
• Latest Firefox
• Latest Opera
• Latest Safari

收費，今天的價格是$18。

演示地址：http://wrapbootstrap.com/preview/WB0R5L90S

特點：

相對Metronic他准備了很多個版本，比如：

Static version, AngularJS, ASP.NET MVC5/MVC6, Meteor and Ruby on Rails version

插件很多，但都按引用分文件夾存放了，靜態版本中我看了就是48個插件，有PSD源文件，提供的文件包含：

Static Full Version Static Seed Project MVC5 Full Version MVC5 Seed Project MVC6 Full Version (.NET RC1) MVC6 Seed Project (.NET RC1) Ruby on Rails Full Version Ruby on Rails Seed Project Meteor Full Version Meteor Seed Project Angular Full Version Angular Seed Project Angular Seed Project Grunt Angular Seed Project Gulp Angular Seed Project MEANJS Documentation Landing Page LESS SASS SCSS PSD Files (more than 20 main views and components full layered)

 

詳細介紹：https://wrapbootstrap.com/theme/inspinia-responsive-admin-theme-WB0R5L90S

十、LigerUI

LigerUI 是基於jQuery 的UI框架，其核心設計目標是快速開發、使用簡單、功能強大、輕量級、易擴展。簡單而又強大，致力於快速打造Web前端界面解決方案，可以應用於.net,jsp,php等等web服務器環境。

官網：http://www.ligerui.com/

演示：http://www.ligerui.com/demo.html

特點：

使用簡單，輕量級
控件實用性強，功能覆蓋面大，可以解決大部分企業信息應用的設計場景
快速開發，使用LigerUI可以比傳統開發減少極大的代碼量
易擴展，包括默認參數、表單/表格編輯器、多語言支持等等
支持Java、.NET、PHP等web服務端
支持 IE6+、Chrome、FireFox等瀏覽器
開源，源碼框架層次簡單易懂。

下載：http://pan.baidu.com/s/1o83vRZk

API:         http://api.ligerui.com/

演示地址:  http://demo.ligerui.com/

源碼下載:  http://git.oschina.net/ligerui/LigerUI/ (源碼托管)

　　　　　http://pan.baidu.com/s/1D0AVO (V1.2.3)

技術支持： http://www.cnblogs.com/leoxie2011/

個人感覺文檔比較全，也有公司的信息系統使用了該UI（去年我去一家公司培訓他們就使用該UI，后面上頭說要換漂亮些的，他們糾結好久），但整合感覺比不上EasyUI，與DotNet親一點感覺，DWZ則與Java新一些。

LigerUI中國人開發的、免費。

十一、FineUI

基於 jQuery / ExtJS 的 ASP.NET 控件庫、創建 No JavaScript，No CSS，No UpdatePanel，No ViewState，No WebServices 的網站應用程序。

該UI也是國人的作品，開源、免費、至今有100多個版本了，個人感覺界面不算難看，控件多，幫助說明也有不少；但只是為ASP.NET量身定做的，有一定的局限性；重，非常重，ExtJS+ASP.NET的頁面狀態就更加重了。

官網：http://fineui.com/ 
論壇：http://fineui.com/bbs/ 
示例：http://fineui.com/demo/ 
文檔：http://fineui.com/doc/ 
下載：http://fineui.codeplex.com/ 

十二、其它UI

下載地址（沒有積分請留下您的郵箱，我發給大家），因為好多人喜歡

十三、總結下下載

沒有形式就沒有內容、UI重要，特別是當客戶與老板不懂太多關於代碼、功能、性能的時候。

上面的UI你也許可以通過各種途徑獲得，但商業應用請慎重。

想來想去還是拿不定主意，不過有點想法：

1、使用HUI和bootstrap

2、使用EasyUI的框架，內容頁使用HUI+BootStrap，iframe選項卡

3、從各個功能強大的頁面中拿一些插件過來