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面向对象编程代码
Dec 19 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
JSONP跨域请求实例详解
Jul 04 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 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 开发的 8 个技巧
2006/10/09 PHP
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
php实现对象克隆的方法
2015/06/20 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
简单三步,搞掂内存泄漏
2007/03/10 Javascript
JavaScript的public、private和privileged模式
2009/12/28 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
node.js基础知识小结
2018/02/26 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
python读取html中指定元素生成excle文件示例
2014/04/03 Python
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
Django卸载之后重新安装的方法
2017/03/15 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
杭州时比特电子有限公司SQL
2013/08/22 面试题
班级团队活动方案
2014/08/14 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
《雷雨》教学反思
2016/02/20 职场文书
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
MySQL 字符集 character
2022/05/04 MySQL
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server