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 相关文章推荐
一组JS创建和操作表格的函数集合
May 07 Javascript
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
图解javascript作用域链
May 27 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 Javascript
JavaScript如何判断input数据类型
Feb 06 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
ztree+ajax实现文件树下载功能
May 18 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数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
babel基本使用详解
2017/02/17 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
python网络编程实例简析
2014/09/26 Python
Django与遗留的数据库整合的方法指南
2015/07/24 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
Keras搭建自编码器操作
2020/07/03 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
Python 中如何写注释
2020/08/28 Python
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
一套C#面试题
2013/10/09 面试题
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
员工自我鉴定范文
2013/10/06 职场文书
县优秀教师事迹材料
2014/01/31 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
民事调解协议书
2016/03/21 职场文书
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript