Bootstrap Metronic完全响应式管理模板学习笔记


Posted in Javascript onJuly 08, 2016

学习使用Bootstrap Metronic完全响应式管理模板,具体内容如下

1.简介

Bootstrap Metronic是一个基于Bootstrap 3.x的高级管理控制面板主题。Bootstrap Metronic - 是一个完全响应式管理模板。基于Bootstrap3框架。高度可定制的,易于使用。适合从小型移动设备到大型台式机很多的屏幕分辨率。包含7个主题,高达100个左右的实例页面,非常丰富页面展示效果,包括表单,表格,地图,日历…等等。

对比了其他Bootstrap定制的影响式模版,这个功能与插件比较丰富。感觉大同小异如(免费的-AdminLTE)

注:mvc4系列不会升级用metronic

软件准备:VS2013

2.资源

7个主题演示地址:http://www.keenthemes.com/preview/metronic/

3.用途和保障

主要用途:一体化的管理模版,构建管理系统后台,如CMS,HR,OA等管理系统必备。花俏的软件比界面死板的同等软件价格可卖出高达40%

能合并到所有语言前端,包括主流asp.net,JSP,PHP

(源源不断的Bootstrap 和Metronic作为更新技术支持,除非推兔团队解散)

4.目录

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

Bootstrap Metronic完全响应式管理模板学习笔记

以上是部分截图。右边的设置可以设置布局的方式

Bootstrap Metronic完全响应式管理模板学习笔记

把浏览器缩小看看平板下的效果同样非常不错。

5.总结

我们只需用到theme下的templates为参照模版。

作者:YmNets
出处:http://ymnets.cnblogs.com/

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题: Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
jQuery实现无限往下滚动效果代码
Apr 16 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
Javascript中的神器——Promise
Feb 08 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
vue权限管理系统的实现代码
Jan 17 Javascript
JavaScript代码简化技巧实例解析
Sep 09 Javascript
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
Angularjs---项目搭建图文教程
Jul 08 #Javascript
Node.js 文件夹目录结构创建实例代码
Jul 08 #Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 #Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 #Javascript
简单实现js页面切换功能
Jan 10 #Javascript
JavaScript作用域示例详解
Jul 07 #Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 #Javascript
You might like
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
php时间戳转换的示例
2014/03/31 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
newxtree.js代码
2007/03/13 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
Python的函数的一些高阶特性
2015/04/27 Python
Python3爬楼梯算法示例
2019/03/04 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
keras多显卡训练方式
2020/06/10 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
英国精品买手店:Browns Fashion
2016/09/29 全球购物
英国高街电视:High Street TV
2018/05/22 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
2014年度培训工作总结
2014/11/27 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers
python turtle绘图
2022/05/04 Python