metronic是一个基于Bootstrap 3.x的高级管理控制面板主题。是一套基于Twitter Bootstrap 3.3.4框架开始的多功能响应式后台管理和前台开发模板,一个完全响应式管理模板。基于Bootstrap3框架。高度可定制的,易于使用。适合从小型移动设备到大型台式机很多的屏幕分辨率。包含7个主题,高达100个左右的实例页面,非常丰富页面展示效果,包括表单,表格,地图,日历…等等。
metronic可用于任意类型的网页应用:
Metronic可以用于各种形式的网站程序,如管理员后台,管理仪表,电子商务后台,CMS,CRM,SAAS,公司网站,电商网站,商务网站,信息展示站,博客等。Metronic的时尚,干净,扁平化的设计,可以让你的网站看起来很友好,很吸引人。Metronic模板包含了大量的插件和UI元素,并且可以在主流浏览器和平板设备,智能设备正常显示。
浏览器兼容:iE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome
对比了其他Bootstrap定制的影响式模版,这个功能与插件比较丰富。感觉大同小异如(免费的-AdminLTE)
我很少做前端开发,本文是作为笔记和共同学习的过程。请读者读时勿偏激。可能会颠覆你的前端观念
软件准备:VS2013
用途和保障
主要用途:一体化的管理模版,构建管理系统后台,如CMS,HR,OA等管理系统必备。花俏的软件比界面死板的同等软件价格可卖出高达40%
能合并到所有语言前端,包括主流asp.net,JSP,PHP
(源源不断的Bootstrap 和Metronic作为更新技术支持,除非推兔团队解散)
目录
按目录名称可以看出包含了文档(documentation),资源(resources),开始(start),主题(theme与theme_trl),说明readme.txt
打开readme我们可以看到我们只需要用theme这个文件夹即可。theme_rtl支持RTL,RTL颠覆我的编程习惯。
可以依次运行theme-->templates-->adminX下的index效果。
然并卵,发现每一个admin对应了admin_material_design,根据readme说明admin_material_design是对应AngularJS版本的,不知道说得对比。
不懂AngularJS所以我们只用到正常版本的adminX
以上是部分截图。右边的设置可以设置布局的方式
把浏览器缩小看看平板下的效果同样非常不错。
全功能列表
干净的,直观的和完全响应的Metro风格的设计(在所有主要浏览器,是平板电脑和)
500 +有效的模板页面
Bootstrap 3.3.5框架
jQuery 1.10.2
6种颜色的主题
全Sass支持
完整的RTL支持
开发者友好的代码
谷歌Open Sans字体
语言切换栏
多级菜单
卧式巨型菜单
电子商务
仪表板
订单
秩序观
产品
产品编辑
布局
固定的默认标题的布局
显示/隐藏侧边栏
横侧边栏菜单
横向菜单的网页实例
多用电子邮件模板
通过AJAX加载内容
侧边栏关闭页面示例
侧边栏固定页面实例
空白页的例子
盒装页面示例
非响应盒装的页面布局
用户界面功能
自定义标签和手风琴
地铁风格的按钮、表单元素
glyphicons一体化
字体(字体真棒真棒图标用3.2.0版)
图表(jQuery上)
圆刻度盘(jQuery旋钮)
地铁时尚的滑块(jQuery UI)
单选按钮和复选框的Metro风格(jQuery均匀)
粘粘的通知(jQuery的交流)
脉动
自定义切换按钮(启动按钮)
jQuery UI模型
Windows 8风格瓷砖
toastr通知
集成的树视图(引导树)
集成的嵌套列表(jQuery嵌套)
离子范围滑块
noui范围滑块
圆刻度盘旋钮
用户界面的进度条(jQuery blockUI)
标签输入(jQuery标签输入)
形式的东西
日期选择器(引导日期选择器)
时间选择器(引导时间选择器)
钟面时间选择器(引导钟面时间选择器)
日期范围选择器(引导日期范围选择器)
颜色选择器(引导颜色选择器)
2下拉菜单选择
自定义选择下拉(引导选择)
多重选择
自举开关
纺纱
IP地址输入
输入掩码
标签输入
先进的文件输入
集成WYSIWYG编辑器(引导wysihtml5和CKEditor)
无限的表单控件
推进形式布局(2列,加边,行行分离,剥离,标签剥离)
推进形式验证(jQuery表单验证插件)
形式x-editable
表单向导
图像的裁剪
多文件上传
悬浮窗文件上传
组件形式
网页
促销页面
博客列表
博客
新闻列表
新闻发布
Metro风格的时间表
投资组合页面
关于我们
我们
常见问题
即将上市
锁屏
综合全日历(jQuery完整的日历)