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 相关文章推荐
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
Aug 14 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
JavaScript DOM进阶方法
Apr 13 Javascript
jQuery中toggle()函数的使用实例
Apr 17 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
详解ES6 Symbol 的用途
Oct 14 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
vue实力踩坑之push当前页无效
Apr 10 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
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
php 404错误页面实现代码
2009/06/22 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
Python去除列表中重复元素的方法
2015/03/20 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
发展部经理职责规定
2014/02/22 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
高中教师个人工作总结
2015/02/10 职场文书
2015年工商所工作总结
2015/05/21 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA