Web開發後臺管理UI-整理篇

時間 2019-12-02

標籤 web 開發後臺管理整理欄目 HTML 简体版

原文原文鏈接

這個文章54it.com的小編作了一些整理和更新
如有版權問題請知會我刪除/變動
謝謝php

目錄html

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.總結

要求：前端

一、美觀、大方、簡潔\開發快週期短容易部署
二、IE最低版本要兼容IE八、不考慮兼容IE6/IE7，Win7/IE8,XP/IE8,jQuery的版本不一樣,兼容性也不一樣,要注意選擇
三、能經過選項卡打開多個頁面，不想作單頁，iframe也不要緊
四、性能好，不要太笨重
五、基本在PC跑,手機終端少,界面過小,有沒有Bootstrap均可以
六、可複用。git

1、EasyUIgithub

官網：http://www.jeasyui.com/
有免費版，有商業版，商業版收費，幫助很是詳盡
資源：http://www.jeasyui.net/
easyui是國人的的做品，但服務器在國外，官網也是英文的，這個網站相似官網的中文版web

easyui是一種基於jQuery的用戶界面插件集合。
easyui爲建立現代化，互動，JavaScript應用程序，提供必要的功能。
使用easyui你不須要寫不少代碼，你只須要經過編寫一些簡單HTML標記，就能夠定義用戶界面。
easyui是個完美支持HTML5網頁的完整框架。
easyui節省您網頁開發的時間和規模。
easyui很簡單但功能強大的。
ajax

優勢：輕量、功能強大、免費、兼容性好、幫助詳細、使用的人多生態好
缺點：非響應式佈局、某些系統看起來有點土（客戶與老闆的感受、認爲與最新的那些響應式UI有差距）
得到：搜索、網盤搜索大把被搭建好了基礎功能的框架,如動態的ASP/PHP/NET和JAVA等。bootstrap

2、DWZ JUI
官網：http://jui.org/
下載：https://github.com/dwzteam/後端

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

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

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

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

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

5、Ace Admin

響應式Bootstrap網站後臺管理系統模板，很是不錯的輕量級易用的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

使用的插件：

使用到的插件並無分開存放，使用起來會麻煩一些。
另外該插件也被不少人簡化、修改爲選項卡+iframe風格了。

小編的同事嘗試和後端動態結合,發現其左側菜單動態化較爲麻煩,不像左右Iframe佈局,整合起來代碼量比較大
並且是歐美人的風格,國人操做起來要逐步習慣.

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

7、H+ UI
收費998人民幣
徹底響應式，基於Bootstrap3.3.6的扁平化主題
採用左右兩欄式佈局，使用Html5+CSS3
提供了諸多的強大的能夠從新組合的UI組件，集成jQuery(v2.1.4)
能夠對她進行深度定製，以作出更強系統。

官網：http://www.zi-han.net/theme/hplus/
與Metronic與INSPINIA很是像，插件很是多，。

8、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精緻，被許多公司使用。

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

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等瀏覽器
開源，源碼框架層次簡單易懂。

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親近一些。

11、其它UI

12、總結

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

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