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解决方案中