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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
js获取下拉列表的值和元素个数示例
May 07 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 Javascript
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 clearstatcache()函数详解
2010/03/02 PHP
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
PHP删除非空目录的函数代码小结
2013/02/28 PHP
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
读jQuery之二(两种扩展)
2011/06/11 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
ipython和python区别详解
2019/06/26 Python
python socket 聊天室实例代码详解
2019/11/14 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
python对Excel的读取的示例代码
2020/02/14 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
python中的对数log函数表示及用法
2020/12/09 Python
伦敦一卡通:The London Pass
2018/11/30 全球购物
中科软笔试题和面试题
2014/10/07 面试题
设计模式的基本要素是什么
2014/04/21 面试题
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
大学毕业生工作的自我评价
2013/10/01 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
历史博物馆观后感
2015/06/05 职场文书
运动会通讯稿200字
2015/07/20 职场文书
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers