後臺管理UI皮膚的選擇

後臺管理UI的選擇

目錄

• 1、EasyUI
• 2、DWZ JUI
• 3、HUI
• 4、BUI
• 5、Ace Admin
• 6、Metronic
• 7、H+ UI
• 8、Admin LTE
• 9、INSPINIA
• 10、LigerUI
• 11、FineUI
• 12、其它UI
• 十3、總結

最近要作一個企業的OA系統，之前一直使用EasyUI，一切都好，但感受有點土了，想換成如今流行的Bootstrap爲基礎的後臺UI風格，想知足的條件應該達到以下幾個：

一、美觀、大方、簡潔

二、兼容IE八、不考慮兼容IE6/IE7，由於如今還有不少公司在使用Win7系統，系統內置了IE8

三、能經過選項卡打開多個頁面，不想作單頁，iframe也不要緊

四、性能好，不要太笨重

五、最好以Bootstrap爲基礎

六、還但願在之後別的系統中可以複用。

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

1、EasyUI

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

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

使用easyui你不須要寫不少代碼，你只須要經過編寫一些簡單HTML標記，就能夠定義用戶界面。

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

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

easyui很簡單但功能強大的。

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

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

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

下載後你們能夠替換成最新的1.5版的easyui

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

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

2、DWZ JUI

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

官網：http://jui.org/

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

3、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/

缺點：感受用的人少，名氣小，資料不全，配套組件很少，但國人的產品符合國人的口味。

4、BUI

BUI她是基於jQuery,兼容KISSY的UI類庫，專致於解決後臺系統的框架方案，BUI提供了豐富的DPL含有強大的控件庫對業務作了精細的分析。

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

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

感受也比較冷、與HUI有點相似的優勢總體框架符合個人要求，但風格有種說不出的感受。

5、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風格了。

6、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

7、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人民幣。

8、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。

9、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

10、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中國人開發的、免費。

11、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/ 

12、其它UI

十3、總結

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

上面的UI你也許能夠經過各類途徑得到，但商業應用請慎重。

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

一、使用HUI和bootstrap

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

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

歡迎你們補充；