查看: 5680|回復: 2

[HTML代碼] 免費后臺管理UI界面、html源碼推薦(長期更新)

3萬

主題

3萬

帖子

10萬

積分

管理員

Rank: 9Rank: 9Rank: 9

積分
100197
發表于 2017-3-28 22:50:30

一個好的UI應該滿足的條件應該達到如下幾個:

1、美觀、大方、簡潔

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

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

4、性能好,不要太笨重

5、最好以Bootstrap為基礎

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

給大家介紹下我考慮過的UI,也給大家一個參考,如果你有更好的歡迎聯系我補充....(PS:排名不分先后)


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

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

另外該插件也被很多人簡化、修改成選項卡+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,但我測試結果不支持


官網:http://www.metronic.com/

支持:http://metronic.kp7.cn/


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非常像,插件非常多


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)

特點:

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

整體感覺與Metronic類似、功能強大,UI精致,被許多公司使用,確定是值得關注的一個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源文件

詳細介紹: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、hteos



官網:http://www.hteos.com

演示:http://demo.hteos.com/












回復

使用道具 舉報

3萬

主題

3萬

帖子

10萬

積分

管理員

Rank: 9Rank: 9Rank: 9

積分
100197
 樓主| 發表于 2017-3-29 11:17:21
12、layerUI



demo:http://www.layui.com/demo/


文檔:   http://www.layui.com/doc/
13、builive



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

文檔:http://www.builive.com/docs/api/index.html

14、jQuery MiniUI


官網:http://www.miniui.com/

demo:http://www.miniui.com/demo/

文檔:http://www.miniui.com/docs/
回復 支持 反對

使用道具 舉報

3萬

主題

3萬

帖子

10萬

積分

管理員

Rank: 9Rank: 9Rank: 9

積分
100197
 樓主| 發表于 2017-7-7 09:25:32
15. FastAdmin – 基于ThinkPHP5和Bootstrap的極速后臺開發框架




FastAdmin
基于ThinkPHP5和Bootstrap的極速后臺開發框架






官網:http://www.fastadmin.net/

demo:http://demo.fastadmin.net/admin/index/login.html  (admin 123456)

文檔:http://doc.fastadmin.net/


回復 支持 反對

使用道具 舉報