Metronic干货系列-介绍和目录结构

绝地灬酷狼 2022-05-29 05:25 231阅读 0赞

## http://blog.csdn.net/zqy\_zq\_zxl/article/details/73028456    ##

## Metronic干货系列 ##

1.  [Metronic干货系列-介绍和目录结构][Metronic_-]
2.  Metronic干货系列-首页（未更新）
3.  Metronic干货系列-核心文件js（未更新）
4.  Metronic干货系列-核心文件css（未更新）
5.  Metronic干货系列-常用插件（未更新）
6.  Metronic干货系列-快速用法（未更新）
7.  Metronic干货系列-常用demo分析（未更新）
8.  Metronic干货系列-gulp（未更新）
9.  Metronic干货系列-实战(一)（未更新）
10. Metronic干货系列-实战(二)（未更新）

--------------------

# Metronic介绍 #

*  Metronic是一套基于Twitter Bootstrap 3.x的高级管理控制面板主题，是一个完全响应式管理模板，它是收费的但是价格不贵。   
    ![这里写图片描述][SouthEast]
 *  Metronic可用于任意类型的网页应用：商城后台、CMS、CRM、SAAS和一些前端模板包括商业网站、商城、企业网站、作品展示、博客等。
 *  Metronic的时尚、简洁、直观的metro扁平化分格设计，让你的项目看起来更吸引人、用户体验更好、项目成交率大大提高。
 *  Metronic集成了大量的BootStrap插件和Jquery插件：包括sweetAlert(最近更新)、bootstrap-colorpicker、bootstrap-fileinput、bootstrap-switch等等。支持目前流行的各种PC浏览器、平板电脑和手机。浏览器兼容：iE8+、Firefox、 Safari、 Opera、 Chrome。
 *  当前文章所指定的版本是Metronic4.7版本，包含七个模板，100个左右的demo页面。经过版本的迭代更新，页面效果越来越好看，功能越来越强大。包括portlet、花俏的按钮、各种图表、好看的布局等等。
 *  官网的演示地址:[http://www.keenthemes.com/preview/metronic/][http_www.keenthemes.com_preview_metronic] ，我们将选取它里面的第二套皮肤的默认版本作为研究的对象。

## Metronic目录结构介绍 ##

![这里写图片描述][SouthEast 1]

### \_documentation目录 ###

![这里写图片描述][SouthEast 2]

用浏览器打开\_documentation目录下的index.html文件。

![这里写图片描述][SouthEast 3]

文档中对首页模板、字体样式、主题和布局、顶部菜单栏、左侧菜单栏、横向菜单栏、layout\_blank\_page.html(包含基本布局的空页面)、BootStrap插件、Jquery的插件等等还有版本更新的日志进行了一下简单的说明。可以从头到尾仔细的看一下，我们将会选择几个重点的内容来进行讲解和说明：第4点（Theme & Layout Configuration）、第8点（New Page）和 第11点（Coding & Extending）。

#### 第4点(Theme & Layout Configuration) ####

![这里写图片描述][SouthEast 4]

Metronic 具有6种色彩主题（和七个模板不是一回事）：default、darkblue、blue、grey、light、light2。如果要用其中的一种色彩主题，你需要包含themes/\[theme\_name\].css 在页面的 head 部分。如果你喜欢蓝色主题，那就包含layouts/layout/css/themes/darkblue.css css 文件。我们来看下真实的效果。第二套模板默认的主题是blue，也就是我们现在准备用的模板。   
![这里写图片描述][SouthEast 5]

![这里写图片描述][SouthEast 6]

换成dark.css文件之后   
![这里写图片描述][SouthEast 7]

![这里写图片描述][SouthEast 8]

首页有一个设置的按钮，已经提供了动态主题的切换，也就是动态的引入了不同的主题文件。我们接着往下看Theme Style。

![这里写图片描述][SouthEast 9]

Metronic 默认采用直角样式，若要改为圆角，只需要改变 “components.css” 为 “components-rounded.css”即可，我们来试试看。

![这里写图片描述][SouthEast 10]

![这里写图片描述][SouthEast 11]

可以看到像这种portlet、提示框和tab页签栏等地方都已经有圆角了，我们接着往下看Layout Settings。

![这里写图片描述][SouthEast 12]

这段话主要的意思是：最好的学习方法就是打开 Metronic 页面，使用位于页面右上角的 “Theme Settings” 面板。选择你的首选布局选项，当你的布局组合变化时，采用 Chrome 开发工具或者 Firefox 的 Firebug 工具去看 HTML 源码改变。当你改变某个布局选项，通常一些 css 样式会增加到你的页面主体元素中。当你改变布局设置，仅仅这最高父 HTML 元素被改变，页面内容则保持原样。我们来试一下。我们让首页的layout从fluid改成boxed，页面有三处发生了变化，我们一一找一下。   
![阿斯顿发生否是否][SouthEast 13]

下图的2个红色框的class类是在点击boxed之后动态添加的。

![这里写图片描述][SouthEast 14]  
第三处是在下面，在class=”page-container”这个div的外层，动态的包裹了一个div让其class=”container”

![这里写图片描述][SouthEast 15]  
我们在继续往下看 Fixed Header & Footer On Mobile Devices：

![这里写图片描述][SouthEast 16]

在移动设备上，顶部和底部固定这个效果默认是禁止的。如果要想在设置这个选项，你需要定位到移动设备的头部或底部，并应用page-footer-fixed page-footer-fixed-mobile 和 page-header-fixed page-header-fixed-mobile 类到 HTML 相应的主体元素上。来看下效果：

![这里写图片描述][SouthEast 17]

上图是默认情况下已经设置了固定头部和底部，但是并没有什么卵用。我们手动把page-footer-fixed-mobile 、page-header-fixed-mobile这两个类给加上去看看。

![这里写图片描述][SouthEast 18]

我们在往下看（Sidebar Menu Settings）

![这里写图片描述][SouthEast 19]

默认的侧边栏菜单带有data-auto-scroll=”true”和data-slide-speed=”200”配置。若要禁用侧边栏的自动滚动效果，应用data-auto-scroll=”false”到page-sidebar-menu标签。要改变子菜单滑动速度，则设置一个新的值data-slide-speed=”300”.

禁用侧边栏的自动滚动效果：这句话的意思是针对菜单栏是“手风琴”样式，如果设置为true，当展开菜单的时候侧边栏有滚动的效果，他会随着你的点击的那个坐标为中心，让其滚动到你的视野区，不过这样如果不设置左侧菜单为fixed的话，中间的内容也是随着一起动，这里建议设为false，主要还是根据需求而定。

![这里写图片描述][SouthEast 20]

再来看下Sidebar Menu Light Style   
![这里写图片描述][SouthEast 21]

用着浅色侧边栏样式，你需要应用 page-sidebar-menu-light class 属性在 page-sidebar-menu class 属性后面。这句话的意思是针对于像主题一（admin\_1）那样的菜单形式，主题一（admin\_1）的主题设置里面是有对这个类的设置，我们来看下默认情况下是什么样子的，如下图所示。   
![这里写图片描述][SouthEast 22]  
改变成 page-sidebar-menu-light的样式如下图所示。

![这里写图片描述][SouthEast 23]

再来看下Sidebar Menu With Hover Submenus

![这里写图片描述][SouthEast 24]  
这段话的意思是加上page-sidebar-menu-hover-submenu这个类，就能够鼠标滑动出现子菜单，其实我们的第二套皮肤已经默认是这个样子的。

#### 第8点（New Page） ####

![这里写图片描述][SouthEast 25]

每个模板都会有layout\_blank\_page.html，这是一个基本布局页面包括了：头部、左侧栏、底部、中间的内容是空的，整体代码比较精简，如下图所示。

![这里写图片描述][SouthEast 26]

这个页面可以作为一个学习Metronic并想自定义首页内容的页面。

#### 第11点（Coding & Extending） ####

![这里写图片描述][SouthEast 27]  
一、CSS   
你可以使用你自己的定制Custom.css去覆盖主题样式，你需要保持自己的css代码和主题样式代码分开，如果以后更新了Metronic，那么就很容易集成。

二、Excuding Unused Resources(删除无用的资源)

1、假如你想选择主题1（在/theme目录下面）。

2、有2个主要的文件夹admin\_1和assets目录

assets 里面是项目所有的js、css、图片和第三方插件，如下图：   
![这里写图片描述][SouthEast 28]

admin\_1里面是这个主题下所有示例的页面，如下图：

![这里写图片描述][SouthEast 29]

3、在assets目录下面我们可以看到有个layouts目录，这里面有七个layouts，这七个正好对应的是七个主题的布局，如果你选择了admin\_1，那么这里就留下layout和global文件夹，其它都可以删掉了。   
4、和第8点一样，介绍了layout\_blank\_page.html的用意   
5、他的意思是尽量的让layout\_blank\_page.html里面的代码给模块化，分离出来封装成共用的头部、左侧菜单栏还有底部页面。意思就是把中间自定义变化的内容单独抽离出来，在这个页面里面进行incluce头部、左侧菜单栏和底部页面。[QiYuAdmin项目][QiYuAdmin]没有这样做，QiYuAdmin用的是bootstrap.addtabs，利用Ajax异步请求，将页面作为请求的对象返回到首页的内容区域。   
6、这个就是温馨提示，让你看着点用，用到的就用，没用到的删掉。

### \_resources目录 ###

![这里写图片描述][SouthEast 30]  
这个目录下放的是一些psd文件，设计的原稿。

### \_start和start.html ###

![这里写图片描述][SouthEast 31]

进入整个框架的开始页面，双击start.html就行。

### readme.txt ###

Metronic的说明。

### theme目录 ###

![这里写图片描述][SouthEast 32]

这个就是源码，七个模板的所有页面、js、css和图片等等。我们这里选择admin\_2目录和assets（assets里面的layout选择layout2）目录。

# 总结 #

通过对Metronic的目录结构进行分析，我们大致对它有一定的认知和了解，它就是基于Bootstrap并集成了几十个插件的前端框架，做了7套主题皮肤和布局，并且根据这7套皮肤将插件在一次进行样式和动态效果的调整将其封装成了自己的Metronic。其实它确实很厉害，我们确实需要站在巨人的肩膀上，让自己的项目节约成本、让自己的项目高大上起来、让自己的项目灵活起来，谢谢。

[Metronic_-]: http://blog.csdn.net/zqy_zq_zxl/article/details/73028456
[SouthEast]: /images/20220529/abf13763d5b749428d75f93f5f930216.png
[http_www.keenthemes.com_preview_metronic]: http://www.keenthemes.com/preview/metronic/
[SouthEast 1]: /images/20220529/809e487976b44a34adcfbed1dcd8ab9b.png
[SouthEast 2]: /images/20220529/41f5d55e1dd74f43a5f784f1708719b8.png
[SouthEast 3]: /images/20220529/08494ea2403b46d5ab9d4e342aa19100.png
[SouthEast 4]: /images/20220529/58d5a7dad5dd4da288dfd27fb8a73a2f.png
[SouthEast 5]: /images/20220529/f57c8b9123d34b48912e97eb9be9b467.png
[SouthEast 6]: /images/20220529/cea660262dc045d29b0685dc22ff21be.png
[SouthEast 7]: /images/20220529/ebad0653f6b44dcbbc0b6897e6199d0c.png
[SouthEast 8]: /images/20220529/ccb356fae4064cd8903b535c7358139f.png
[SouthEast 9]: /images/20220529/bd9be513549e4f34a14507b39210eefc.png
[SouthEast 10]: /images/20220529/748f54322aea430d84a714d8083edb94.png
[SouthEast 11]: /images/20220529/2f6dc6f8a087461a8726e96e19228a99.png
[SouthEast 12]: /images/20220529/24b668170e3c4c2bbd1b69da462ca0fe.png
[SouthEast 13]: /images/20220529/3cd976c69c3c4d15bb3f7e814b21e173.png
[SouthEast 14]: /images/20220529/8638f04ab2514ed6b2d8401f7b5170a3.png
[SouthEast 15]: /images/20220529/ea8417d0dd944667878fadb5e6128110.png
[SouthEast 16]: /images/20220529/3ab483e7cb484497a3037f777befc0ee.png
[SouthEast 17]: /images/20220529/27774cccae7c42a7aefd4a6f8cb2caf8.png
[SouthEast 18]: /images/20220529/d58acaa5a2fe4ea9b053b57293c77975.png
[SouthEast 19]: /images/20220529/4cd8d8442e414e8498e93823b632ad9c.png
[SouthEast 20]: /images/20220529/aa93a3e995de4620b7194fb5ed6da425.png
[SouthEast 21]: /images/20220529/0aa2ddebbaac4dcab1775303bb609660.png
[SouthEast 22]: /images/20220529/425dd9a7f8104b86b8f0de82391173de.png
[SouthEast 23]: /images/20220529/d0ccde908390401f80d2facf566e534d.png
[SouthEast 24]: /images/20220529/2f1c1da3b4b9448d9289a9c7c639c1c1.png
[SouthEast 25]: /images/20220529/8c59cdfeeb4f4f4a9070c97c48c4d6d8.png
[SouthEast 26]: /images/20220529/292b9666d7104fc0b05bbd59a2059671.png
[SouthEast 27]: /images/20220529/886f848d3ea3484fbfd0988e90ced44b.png
[SouthEast 28]: /images/20220529/9b32d86689c84890809f33b9d5af415b.png
[SouthEast 29]: /images/20220529/22308209de484e308f158ae75e6a1777.png
[QiYuAdmin]: http://git.oschina.net/karring/qiyu
[SouthEast 30]: /images/20220529/c53a396a8e6d407288b95cacfc7ec21c.png
[SouthEast 31]: /images/20220529/2ab32a2bfbe14edaba55acb25efb3a69.png
[SouthEast 32]: /images/20220529/f8940390d86345e5821267976bce8eb1.png