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中html()方法使用不当带来的陷阱
Apr 07 Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
Vue声明式渲染详解
May 17 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
React-router v4 路由配置方法小结
Aug 08 Javascript
Vuex中mutations与actions的区别详解
Mar 01 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 Javascript
原生jQuery实现只显示年份下拉框
Dec 24 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
PHP4 与 MySQL 交互使用
2006/10/09 PHP
php面向对象的方法重载两种版本比较
2008/09/08 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
Java中final关键字详解
2015/08/10 PHP
php实现简单爬虫的开发
2016/03/28 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
2017/07/31 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
详解Python3中的Sequence type的使用
2015/08/01 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
python打开使用的方法
2019/09/30 Python
Python序列化pickle模块使用详解
2020/03/05 Python
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
一些Solaris面试题
2015/12/22 面试题
七一表彰活动方案
2014/01/18 职场文书
篝火晚会主持词
2014/03/25 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
爱情保证书
2015/01/17 职场文书
诚信承诺书
2015/01/19 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
慈善募捐倡议书
2015/04/27 职场文书
高一英语教学反思
2016/03/03 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
MySql新手入门的基本操作汇总
2021/05/13 MySQL
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS