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 相关文章推荐
jQuery使用手册之二 DOM操作
Mar 24 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
Javascript中从学习bind到实现bind的过程
Jan 05 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
js实现右键弹出自定义菜单
Sep 08 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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
PR值查询 | PageRank 查询
2006/12/20 PHP
php 批量替换html标签的实例代码
2013/11/26 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
Python是编译运行的验证方法
2015/01/30 Python
Python中使用支持向量机(SVM)算法
2017/12/26 Python
python实现图书借阅系统
2019/02/20 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
平面设计岗位职责
2013/12/14 职场文书
采购人员的个人自我评价
2014/01/16 职场文书
小学生综合素质评语
2014/04/23 职场文书
文明礼仪标语
2014/06/13 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
四风对照检查材料范文
2014/09/27 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
公司辞职信模板
2015/05/13 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis