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 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
模拟select的代码
Oct 19 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
Vue头像处理方案小结
Jul 26 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
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 输入输出流详解及示例代码
2016/08/25 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
range 标准化之获取
2011/08/28 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
微信小程序的生命周期的详解
2017/10/19 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
Python中文件的读取和写入操作
2018/04/27 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
怎么处理XML的中文问题
2015/03/26 面试题
abstract是什么意思
2012/02/12 面试题
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python