后台管理UI

article/2025/9/2 9:10:16

原文地址:https://www.cnblogs.com/Leo_wl/p/5791545.html

后台管理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

使用的插件:

  View Code

使用到的插件并没有分开存放,使用起来会麻烦一些。

另外该插件也被很多人简化、修改成选项卡+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)

插件:

  View Code

特点:

  • 响应式布局,支持多种设备
  • 打印增强
  • 丰富可排序的面板组件
  • 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源文件,提供的文件包含:

  View Code

详细介绍: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中国人开发的、免费。

十一、其它UI

十二、总结

没有形式就没有内容、UI重要,特别是当客户与老板不懂太多关于代码、功能、性能的时候。

上面的UI你也许可以通过各种途径获得,但商业应用请慎重。

想来想去还是拿不定主意,不过有点想法:

1、使用HUI和bootstrap

2、使用EasyUI的框架,内容页使用HUI+BootStrap,iframe选项卡

3、从各个功能强大的页面中拿一些插件过来



http://chatgpt.dhexx.cn/article/sdKNCY1L.shtml

相关文章

基于Boostrap的H+ 后台主题UI框架(开源)

目录 H 后台主题 UI 框架 H的布局及几种常用UI组件 H 后台主题 UI 框架 H是一款常用后台主题UI框架。首发于 2013 年,由 Zihans Blog 开发并维护,属于国内早期做中后台 UI 框架的产品,在国内拥有广泛的用户基础。由于作者自身原因&#xf…

使用 妹子UI 开发后台管理页面

使用 Amaze UI 开发漂亮的后台管理页面&#xff0c;管理端登录页面、管理端列表页面、管理端保存页面。 页面布局样式使用固定定位和flex实现。 创作时间&#xff1a;2022年10月9日09:21:36 登录页面效果 列表页面效果 保存页面效果 引入 妹子UI 样式文件 <link rel"…

通用后台管理系统前端界面

1、项目搭建 局部安装vue-cli 4.5.15 和创建项目 1.1 局部安装vue-cli 工具&#xff0c;方便不同版本进行切换 ###安装指定版本的vue脚手架工具 或者是已安装了&#xff0c;该命令则为使用4.5.15版本的vue/cli npm i -D vue/cli4.5.15 ###查看当前vue脚手架工具版本…

前端技术栈:后台管理端UI框架

链接汇总 X-Admin&#xff08;http://x.xuebingsi.com/&#xff09;若依管理系统&#xff08;http://www.ruoyi.vip/&#xff09;人人开源&#xff08;https://www.renren.io/guide&#xff09;El-Admin&#xff08;https://el-admin.vip/&#xff09; X-Admin 基于 LayUI 开…

vue+element-ui通用后台管理系统(适合新手)

vueelement-ui通用后台管理系统&#xff08;适合新手&#xff09; 1、使用到的技术 使用vue2element-uiaxiosjs-cookielessecharts实现的一个简易的通用后台管理系统&#xff0c;具有很强的可扩展性&#xff0c;修改简单&#xff0c;只要有点前端基础就能看懂&#xff1b; 2…

VUE搭建后台管理界面

后台管理 一、前言二、依赖配置三、koa框架四、数据库五、路由六、前端界面6.1 登录界面6.2 注册界面6.3 展示界面 七、阿里云部署7.1 前端项目7.2 后端node7.3 mysql安装7.4 测试 八、总结 一、前言 本篇文章从头到尾过一遍vue3搭建项目的过程&#xff0c;实现一个用户登录、…

前端UI大全(针对后台管理系统)

转自http://blog.csdn.net/u011001084/article/details/52250270 最近有个项目需要&#xff0c;维护优化以前一个外包的项目&#xff0c;由于项目比较早所以UI不太美观&#xff0c;想做重构。想满足的条件应该达到如下几个&#xff1a; 1、美观、大方、简洁 2、兼容IE8、不考…

jQ UI 后台管理系统基础UI

jQ UI 后台管理系统基础UI jQ UI 后台管理系统基础UI基础页面![在这里插入图片描述](https://img-blog.csdnimg.cn/44464b1228d740779a3cdfadeca60726.png?x-oss-processimage/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5b-D54G155qE5Yi26YCg5ZWG,size_…

后台UI框架介绍

后台管理UI的选择 最近要做一个企业的OA系统&#xff0c;以前一直使用EasyUI&#xff0c;一切都好&#xff0c;但感觉有点土了&#xff0c;想换成现在流行的Bootstrap为基础的后台UI风格&#xff0c;想满足的条件应该达到如下几个&#xff1a; 1、美观、大方、简洁 2、兼容I…

后台UI框架开发(一)

后台UI框架开发(一) 众所周知&#xff0c;现在的后台管理系统的前端页面基本上都是一个样子…… 那既然&#xff0c;每个后台管理页面的样子都是这样的&#xff0c;那我们能不能设计一个页面&#xff0c;专门写成这个样子&#xff0c;只需要以面向对象的方式去使用某些方法来修…

开箱即用的后台UI框架eui(原eadmin)

&#xff08;很多人问有没有开箱即用&#xff0c;不需要复杂打包环境配置的功能强大、界面精美的后台UI框架&#xff0c;现在他来了&#xff09; eui 基于原生JS开发&#xff0c;开箱即用&#xff0c;无需打包环境&#xff0c;专门为不太熟悉mvvm开发模式的人员定制打造。此次…

国内主流在用的10大后台UI框架,私活必备

目录 vue-Element-Admin AdminLTE ant-design-pro tabler ng2-admin Gentelella iview-admin blur-admin vue-admin material-dashboard 前任何企业在开发的过程中&#xff0c;都摆脱不了管理后台的开发需要。 如果一切从0开始&#xff0c;费时费力&#xff0c;而且…

解决xshell无限窗口方法

解决xshell无限窗口方法 百度10分钟&#xff0c;群里吹逼2两小时纸上得来终觉浅,绝知此事要躬行解决xshell-"要继续使用此程序,您必须应用最新的更新或使用新版本"的问题解决xshell-无限窗口的问题 百度10分钟&#xff0c;群里吹逼2两小时 今天xshell突然提示“要继…

正版Xshell+Xftp免费使用,你还在找破解版吗

想必很多人都和阿福一样使用一款软件&#xff0c;先是去官网下载。用了一段时间后提示要付费就直接搜破解版接着用。 今天我的Xshell就到期了&#xff0c;笔记本还是裸奔状态&#xff0c;下载的破解版报毒不敢用&#xff0c;用习惯的软件也不想说换就换&#xff0c;怎么办&…

Finalshell安全吗?Xshell怎么样?

文章目录 一、我的常用ssh连接工具二、Xshell2.1 下载&#xff1a;认准官网2.2 Xshell 配置2.3 Xftp和WinSCP 一、我的常用ssh连接工具 之前讲过&#xff1a; 【服务器】远程连接选SSH&#xff08;PUTTY、Finalshell、WinSCP&#xff09; 还是 远程桌面&#xff08;RDP、VNC、…

【XShell】安装免费版XShell

该文章书写时间&#xff1a;2023年4月18日 最新一次修改&#xff1a;2023年4月19日 目录 一、下载XShell的目的 为什么配置环境需求需要Xshell 为什么Linux就适合 为什么要选择Xshell 二、下载XShell 三、安装XShell 四、使用XShell建立静态 1. XShell初始化界面 2、点击…

mac linux工具下载,xshell mac版

xshell mac版功能非常齐全,可以满足不同人的个性需求。具有强大的分页式环境,还可以定义的文本编辑器编辑终端内容,应对不安全的Telnet客户端,帮助大家实现控制终端的目的,带给用户良好的终端服务器操作体验。感兴趣的朋友可以前来尝试下! xshell for mac软件简介: xshe…

xshell免费版安装使用

介绍 Xshell是一款非常实用的SSH&#xff08;Secure Shell&#xff09;客户端软件&#xff0c;它可以让你在Windows系统中安全地远程登录到Linux或其他UNIX服务器中&#xff0c;并进行终端操作。本文将为大家介绍Xshell 7的安装方法&#xff0c;希望对大家有所帮助。 一、下载…

xshell下载

文章目录 xshell 官网下载地址 xshell 官网下载地址 xshell官网&#xff1a;https://www.xshell.com/zh/xshell/ 进入官网之后选择“所有下载-家庭/学校下载”&#xff0c;这个是免费的填写自己的邮箱地址&#xff0c;然后就会收到相对应的下载地址

你还在使用xshell绿色破解版?

你还在使用xshell绿色破解版&#xff1f; 一、xshell 介绍二、1分钟助你申请Xshell&#xff08;免费版&#xff09;个人版本和家庭版本&#xff0c;避免盗版问题1.访问Xshell官网下载页面 https://www.netsarang.com/zh/xshell-download/2、找到免费授权页面3、收到邮箱一个下载…