后台管理UI选择
目录
最近想搭建一个企业OA系统。 我之前一直用EasyUI。 一切都很好,但感觉有点生锈了。 如果我想改成现在流行的基于Bootstrap的后台UI风格,我想要满足的条件应该满足以下条件:
美观、大方、简洁
兼容IE8,不考虑兼容IE6/IE7,因为还有很多公司使用Win7系统,系统内置了IE8
您可以通过选项卡打开多个页面。 如果不想做成单页面,用iframe也没关系
性能好但又不会太笨重
最好基于Bootstrap
也希望未来能够在其他系统中复用。
反复纠结的选择开始了。 我介绍一下我考虑过的UI,给大家一个参考。
1.简单的用户界面
easyui 是基于 jQuery 的用户界面插件的集合。
easyui 提供了创建现代交互式 JavaScript 应用程序所需的功能。
使用easyui不需要编写大量代码,只需要编写一些简单的HTML标签来定义用户界面。
easyui是一个完整的框架,完美支持HTML5网页。
easyui 可以节省您的 Web 开发时间和规模。
easyui 简单但功能强大。
优点:轻量、功能强大、免费、兼容性好、帮助详细、用户多、生态好
缺点:非响应式布局,有些系统看起来有点土(客户和老板的感觉,和最新的UI确实有差距)
获取方式:网上搜索,网盘搜索,已经搭建了大量基础功能框架,下载
下载后替换为easyui最新1.5版本即可
官网:,有免费版本,有商业版本,商业版本收费,帮助很详细
资源:easyui是中国人的作品,但是服务器在国外,官网也是英文的。 这个网站类似于中文版的官方网站
2. DWZ JUI
特点: DWZ富客户端框架(jQuery RIA框架),是一个由中国人开发的基于jQuery的Ajax RIA开源框架。 设计目标是简单实用、快速开发、降低ajax开发成本。
官方网站:
下载:
3.惠
H-ui前端框架是基于Bootstrap的思想,基于HTML、CSS、JAVASCRIPT开发的轻量级Web前端框架。 它开源免费,简单灵活,兼容性好,满足大多数中文网站。 它分为前端UI和后端UI。
官网:后台、前台
下载:
缺点:感觉用的人少,名气小,资料不全,配套元件不多,但是国人的产品符合国人的口味。
4.BUI
BUI是一个基于jQuery且兼容KISSY的UI类库,致力于解决后台系统的框架解决方案。 BUI提供了丰富的DPL和强大的控件库,用于对业务进行详细分析。
官方网站:
下载:
感觉也比较冷,和HUI有些相似。 整体框架符合我的要求,但是风格有一种说不出的感觉。
5.王牌管理员
响应式Bootstrap网站后台管理系统模板ace admin,一款非常优秀的轻量级易用的admin后台管理系统,基于Bootstrap3,拥有强大的功能组件和UI组件,基本可以满足后台管理系统的需求电子商务模板 兼容ie,并且可以根据不同的设备适配显示,有四种主题可以切换。 以前是收费的,但是最新版本好像不再收费了。
下载:
官方网站:
感觉比较全面,功能强大电子商务模板 兼容ie,组件多,外观漂亮,但是使用了很多不同的插件,兼容性也不错。
兼容的浏览器:
使用的插件:
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.
jQuery Validate 1.11.
FuelUX 2.3.0 (Spinner & Wizard & Treeview
FullCalendar 1.6.4
jQuery ColorBox 1.4.2
jQuery dataTables 1.9.
jQuery Chosen 1.
jQuery Masked Input 1.3.
jQuery Input Limiter 1.3.
jQuery AutoSize 1.17.
Bootstrap Colorpicke
Bootstrap Datepicke
Bootstrap Timepicker v0.2.
Bootstrap DateRange Picker 1.
Bootbox.js 4.0.
jQuery Gritter 1.7.
jQuery slimScroll 1.1.
Spin.js 1.3.
jQuery UI Touch Punch 0.2.
Google Code Prettif
ExplorerCanva
Mindmup Wysiwyg Edito
Toopay Markdown Editor 1.1.
X-editable 1.4.6
Select2 3.4.2
Bootstrap Tags 2.2.
jQuery Mobile 1.3.2 (Custom Build
jqGrid 4.5.
Dropzone.js 3.0
Nestable lists plugin
使用的插件没有单独存放,使用起来会比较麻烦。
另外该插件也被很多人简化修改为tab+iframe的风格。
6. 麦特尼克
Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架。 Metronic拥有简洁优雅的Metro UI风格界面,6种颜色可供选择,76个模板页面,包括图表、表格、地图、消息中心、监控面板等后台管理项目所需的各种组件。
页面规范、精美、精致、美观大方; 功能强大、全面; 在我见过的所有基于 Bootstrap 的网站模板中,Metronic 是我认为最好的之一。 其友好的外观和全面的功能令人印象深刻。 奇迹。 Metronic是一款自适应HTML模板,提供后台管理模板和前端内容网页模板两种风格。
优势:
缺点:
7.H+用户界面
官网简介:H+是一款基于最新版本Bootstrap 3.3.6开发的全响应式扁平主题。 采用主流的左右两栏布局,采用Html5+CSS3等现代技术。 它提供了许多强大的可重新组合的UI组件,并集成了最新的jQuery版本(v2.1.4),当然,还集成了许多强大且多功能的jQuery插件,可以在所有Web应用程序中使用,例如网站管理后台、网站会员中心、CMS、CRM、OA等。当然,你也可以对她进行深度定制,做出更强大的系统。
官方网站:
和Metronic、INSPINIA很相似,插件也很多,收费998人民币。
8. 管理 LTE
AdminLTE 是一个基于 Bootstrap 3.x 的免费主题,它是一个完全响应式的管理模板。 高度可定制且易于使用。 适用于从小型移动设备到大型桌面的多种屏幕分辨率。
下载:(目前星数11652+)
预览:
官方网站:免费 Bootstrap 管理模板
浏览器支持:
插件:
Boostrap Slider
Ion slider
Bootstrap WYSIHTML5
CKEdito
Bootstrap Colorpicke
Bootstrap Date range Picke
Bootstrap Time Picke
Data Tables
Flot
Morris.js
Sparkilne
Full Calendar
iCheck
jQuery input mas
jQuery Knob
jVector Map
Slim Scrol
Pace
Bootstrap Social Buttons
特征:
整体感觉与Metronic类似,功能强大,UI精美,被很多公司使用。
感谢网友(dotNetDR_、Zui、Qianqiu)在评论中推荐,绝对是一个值得关注的UI。
9. 因斯宾尼亚
INSPINIA是一个具有扁平化设计理念的管理模板。 它是由Bootstrap3+框架、HTML5和CSS3开发的完全响应式模板。 它有许多可重用的 UI 组件,并与最新的 jQuery 插件集成。 它可用于所有类型的 Web 应用程序,包括自定义管理面板、项目管理系统、管理仪表板、应用程序后端、CMS 或 CRM。
和Metronic一样,风格也很相似。 我个人认为比Metronic强。 页面规范、精致、精致、美观; 它功能强大而且非常全面; 在我见过的所有基于 Bootstrap 的网站模板中,Metronic 是我认为最好的网站模板之一,既友好又多功能。 Metronic是一款自适应HTML模板,提供后台管理模板和前端内容网页模板两种风格。
浏览器兼容:
费用,今天的价格是 18 美元。
演示地址:
特征:
相比Metronic,他准备了很多版本,比如:
静态版本、AngularJS、ASP.NET MVC5/MVC6、Meteor 和 Ruby on Rails 版本
插件有很多,但都按照参考资料存放在文件夹中。 在静态版本中,我看到了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)
详细介绍:
10.LigerUI
LigerUI是一个基于jQuery的UI框架。 其核心设计目标是快速开发、易于使用、功能强大、轻量级、易于扩展。 简单而强大,致力于快速创建Web前端界面解决方案,可应用于.net、jsp、php等Web服务器环境。
官方网站:
演示:
特征:
易于使用且重量轻
该控件实用性强,功能覆盖面大,可以解决企业信息化应用的大部分设计场景
快速开发,使用LigerUI相比传统开发可以大大减少代码量
易于扩展,包括默认参数、表单/表格编辑器、多语言支持等。
支持Java、.NET、PHP等Web服务器
支持IE6+、Chrome、FireFox等浏览器
开源,源码框架层面简单易懂。
下载:
应用程序编程接口:
演示地址:
源码下载:(源码托管)
(V1.2.3)
技术支援:
个人感觉文档比较齐全,有的公司的信息系统用的就是这个UI(去年我去一家公司培训他们就用了这个UI,后来他们说要改成更漂亮的)漂亮的一个,纠结了好久),但是集成感不如EasyUI。 感觉更接近DotNet一点,而DWZ相对Java来说更新一些。
LigerUI中文开发,免费。
11.FineUI
基于 jQuery/ExtJS ASP.NET 控件库,创建无 JavaScript、无 CSS、无 UpdatePanel、无 ViewState、无 WebServices 网站应用程序。
UI也是中国人的作品。 它是开源、免费的,迄今为止已有100多个版本。 个人觉得界面不丑,控件很多,帮助说明也很多; 但它只是为ASP.NET量身定做的,有一定的局限性。 性别; 重,非常重,ExtJS+ASP.NET的页面状态就更重了。
官方网站:
论坛:
例子:
文档:
下载:
12.其他用户界面
13. 总结
没有形式就没有内容,UI很重要,尤其是当客户和老板对代码、功能、性能不太了解的时候。
您或许可以通过多种渠道获取上述UI,但商业应用请谨慎。
我想来想去还是拿不定主意,但我有一些想法:
1.使用HUI和bootstrap
2.使用EasyUI的框架,内容页使用HUI+BootStrap,iframe选项卡
3.从各种强大的页面中获取一些插件
欢迎大家补充;
搜狐dba