Bootstrap Metronic 学习记录(一)简介

1.简介

  是一个基于Bootstrap 3.x的高级管理控制面板主题。Bootstrap Metronic - 是一个完全响应式管理模板。基于Bootstrap3框架。高度可定制的,易于使用。适合从小型移动设备到大型台式机很多的屏幕分辨率。包含7个主题,高达100个左右的实例页面,非常丰富页面展示效果,包括表单,表格,地图,日历…等等。

  对比了其他Bootstrap定制的影响式模版,这个功能与插件比较丰富。感觉大同小异如(免费的-AdminLTE)

  我很少做前端开发,本文是作为笔记和共同学习的过程。请读者读时勿偏激。可能会颠覆你的前端观念  

  软件准备:VS2013

2.资源

  下载地址 http://yunpan.cn/cm43ZpUwzgRyf  访问密码 a323  目前最新版本4.1.0这个是最新官方原封不动下载的包。我把他打包成7z.本身RAR高达140MB。

  7个主题演示地址:http://www.keenthemes.com/preview/metronic/

3.用途和保障

  主要用途:一体化的管理模版,构建管理系统后台,如CMS,HR,OA等管理系统必备。花俏的软件比界面死板的同等软件价格可卖出高达40%

  能合并到所有语言前端,包括主流asp.net,JSP,PHP

  (源源不断的Bootstrap 和Metronic作为更新技术支持,除非推兔团队解散)

4.目录

  

  按目录名称可以看出包含了文档(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

  

  以上是部分截图。右边的设置可以设置布局的方式

  

  把浏览器缩小看看平板下的效果同样非常不错。

5.总结

  我们只用到theme下的templates为参照模版,

  下一节:尝试合并到Asp.net MVC5解决方案中

  

时间: 2024-08-26 14:41:41

Bootstrap Metronic 学习记录(一)简介的相关文章

Bootstrap Metronic 学习记录(二)菜单栏

1.简介 1)  .环境配置 2)  .提取页面 2).动态生成菜单(无限级别树) 2.系统环境配置 项目需要程序数据支撑,这里选择MVC5.0+EF6.0[SQLSERVER](不对MVC架构和SQLServer做出解读) 运行环境:VS2013+MVC5.0+EF6.1+SQLServer2012 解决方案名称:AppSolution 项目名称:App.Web(UI层)与App.Models(数据访问层) -直接访问模式 提取theme下的所有文件到MVC的Content,提取admin的i

bootstrap table 学习记录

效果: html代码: <!-- 工具容器 --> <div id="toolbar" class="btn-group"> <button id="btn_add" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus" aria-hidden=

Markdown 学习记录

Markdown 学习记录 Markdown 简介 Markdown是一种轻量级标记语言,创始人为约翰·格鲁伯(英语:John Gruber).它允许人们"使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档".[4]这种语言吸收了很多在电子邮件中已有的纯文本标记的特性. Markdown 标题 1. 使用 = 标记一级标题,- 标记二级标题 语法规则: 一级标题 ======== 二级标题 - - - - - - - - 2. 使用 # 标记 使用 # 可

Python学习记录day6

Python学习记录day6 学习 python Python学习记录day6 1.反射 2.常用模块 2.1 sys 2.2 os 2.3 hashlib 2.3 re 1.反射 反射:利用字符串的形式去对象(默认)中操作(寻找)成员 cat commons.py #!/usr/bin/env python#_*_coding:utf-8_*_''' * Created on 2016/12/3 21:54. * @author: Chinge_Yang.''' def login(): pr

NFC学习记录一

随着电子钱包等的类似需求的提出,最近几年NFC(near field communication 近场通信)正在开始慢慢普及.由于工作的需要,现在正在学习NFC相关的知识,先将NFC的一些基础罗列一下,做个记录. 1.NFC简介 NFC(近场通讯)能在短距离内与兼容的设备进行识别和数据交换,一般频率在13.56MHZ,它是RFID与互联互通技术整合而来,如果RFID是父的话,NFC则是子,其继承了父请的功能,又在其上有自己的发挥. NFC一般在这三大领域应用:获取简单信息.点到点通信.电子票务.

学习笔记_svn简介

版本控制(Revision control)是维护工程蓝图的标准做法,能追踪工程蓝图从诞生一直到定案的过程.是一种记录若干文件内容变化,以便将来查阅特定版本修订情况的系统. 可以简单理解: 版本控制工具:就是控制我们项目开发的代码,管理这些代码,使这些代码能够协调工作,形成一个完整的整体:可以上传代码,更新最新代码到本地: 具体做法: 三个人开发各自的代码,引入一台专门的服务器,SVN Server,一人开发代码,本地开发完直接上传到服务器(commit),SVN可以理解成代码数据库:不仅可以上

Angularjs 学习记录

1.Angular 所有的控件以及源码 https://github.com/angular 2.Angular api doc https://code.angularjs.org/1.2.9/docs/api 3.用AngularJS开发下一代Web应用(英文)下载 http://bestcbooks.com/angularjs-2013-4 AngularJS入门教程-v1.01-20130527.pdf http://ishare.iask.sina.com.cn/f/37141539.

bootstrap基础学习【菜单、按钮、导航】(四)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bootstrap基础学习[菜单.按钮.导航](四)</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script src="http://libs.

Spring Boot学习记录(二)--thymeleaf模板

Spring Boot学习记录(二)–thymeleaf模板 标签(空格分隔): spring-boot 自从来公司后都没用过jsp当界面渲染了,因为前后端分离不是很好,反而模板引擎用的比较多,thymeleaf最大的优势后缀为html,就是只需要浏览器就可以展现页面了,还有就是thymeleaf可以很好的和spring集成.下面开始学习. 1.引入依赖 maven中直接引入 <dependency> <groupId>org.springframework.boot</gr