摘要：你可以用此模板作为你应用程序的起点。上一篇之模板的学习之路主题布局配置下一篇之模板的学习之路前端自动化工具
前面我们将 Metronic 的结构和源码大致浏览了一遍，Metronic 整个文件包有三百多兆，在实际项目中，我们肯定用不到所有文件，这时，我们需要做一些自定义。
自定义和扩展 CSS 部分要重载 Metronic 主题的 CSS 样式，我们可以定制 ../assets/layouts/layout/css/custom.css 这个文件. 如果你保持你自己的 css 代码分开独立，这将使得你将来的更新也变得更加容易。
去除不用的资源假定你在 7 个可用的子主题中选择了 Admin 1(admin_1) 子主题.
这个主题有两个部分. 首先是包含了所有 css、js和第三方插件的 assets 文件夹，接着是包含实际 HTML 模板的模板文件夹。可以参考启动时调用的 theme/assets 和 theme/admin_1.
theme/assets 的 layout 文件夹里你可以发现有 7 个独立的 layout 文件夹（如 layout，layou2, ... layout7）,你可以保留你用到的 theme/assets/layouts/layout 和 theme/layouts/global 然后将你用不到的 layout 文件夹删除。 这样在 theme/assets/layouts 文件夹里你就只有 theme/assets/layouts/layout 和 theme/assets/layouts/global 两个文件夹了.
theme/admin_1 文件夹在 layout_blank_page.html 打开时被引用。这个模板包括了压缩后的 css、js 和第三方插件。你可以用此模板作为你应用程序的起点。试着将 layout_blank_page.html 的代码分离成模块化(header, sidebar, footer, main content)，并保持每个页面局部集中。
在第三方插件文件夹(theme/assets/global/plugins)，你可以排除你用不到的插件. 默认 Metronic 包括 80 个第三方插件， 大部分主题你不会用到，你可以将他们排除。
JavaScript 插件和资源选择Metronic 的 _documentation 文件夹里面，我们可以打开 index.html 查看介绍，其中 12. Javascript Plugins & Resources 这部分的内容可以方便的让你了解选用某一个插件需要包含哪些文件资源。
页面如图所示：
具体每个插件的介绍我这儿就不一一展开了。
升级Metronic 从 v1.5.x 开始采用 Bootstrap 3.0 框架, 作者更新了全部主题并升级了大部分第三方插件和资源。从 2.x 迁移到 3.0 最好的方式是首先升级你的页面 header, top bar menu, sidebar menu 和 footer 部分。然后处理 content 和 UI 组件。
Metronic 一些主要 class 改变Major Metronic Class Changes
| Older Versions | Metronic 1.5 |
|---|---|
| .m-wrap | .form-control |
| .btn | .btn .default |
| .xsmall | .input-xsmall |
| .small | .input-small |
| .medium | .input-medium |
| .large | .input-large |
| Bootstrap 2.x | Bootstrap 3.0 |
|---|---|
| .container-fluid | .container |
| .row-fluid | .row |
| .span* | .col-md-* |
| .offset* | .col-md-offset-* |
| .brand | .navbar-brand |
| .nav-collapse | .navbar-collapse |
| .nav-toggle | .navbar-toggle |
| .btn-navbar | .navbar-btn |
| .hero-unit | .jumbotron |
| .icon-* .glyphicon | .glyphicon-* |
| .btn .btn | .btn-default |
| .btn-mini | .btn-xs |
| .btn-small | .btn-sm |
| .btn-large | .btn-lg |
| .visible-phone | .visible-sm |
| .visible-tablet | .visible-md |
| .visible-desktop | .visible-lg |
| .hidden-phone | .hidden-sm |
| .hidden-tablet | .hidden-md |
| .hidden-desktop | .hidden-lg |
| .input-small | .input-sm |
| .input-large | .input-lg |
| .checkbox.inline .radio.inline | .checkbox-inline .radio-inline |
| .input-prepend .input-append | .input-group |
| .add-on | .input-group-addon |
| .thumbnail | .img-thumbnail |
| ul.unstyled | .list-unstyled |
| ul.inline | .list-inline |
关于更多 Bootstrap 从 2.x 迁移到 3.0，请看官方的说明：http://getbootstrap.com/getti...。
在升级之前，请不要忘了备份你的文件。
上一篇：Bootstrap 之 Metronic 模板的学习之路 - （5）主题&布局配置
下一篇：Bootstrap 之 Metronic 模板的学习之路 - （7）GULP 前端自动化工具
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111530.html
摘要：你可以用此模板作为你应用程序的起点。上一篇之模板的学习之路主题布局配置下一篇之模板的学习之路前端自动化工具 前面我们将 Metronic 的结构和源码大致浏览了一遍，Metronic 整个文件包有三百多兆，在实际项目中，我们肯定用不到所有文件，这时，我们需要做一些自定义。 自定义和扩展 CSS 部分 要重载 Metronic 主题的 CSS 样式，我们可以定制 ../assets/la...
摘要：写在前面的模板非常多，上有着各种各样的免费及付费模板。概述是一个基于设计的自适应多用途的管理后台模板。下一篇之模板的学习之路源码分析之部分 写在前面 bootstrap 的模板非常多，Envato 上有着各种各样的免费及付费模板。Metronic 是我最喜欢的模板之一（看一眼就喜欢上的那种），当前售价 $28 ，觉得赞的，不妨支持一下作者。觉得贵的，想必不用我说，你也会找到途径。:b ...
摘要：的组成结构部分包含了，其中部分又包含了几个部分。代码如下图内容展示截图代码截图快捷栏展示截图代码截图页面底部展示截图代码截图上一篇之模板的学习之路源码分析之部分下一篇之模板的学习之路源码分析之脚本部分 body 的组成结构 body 部分包含了 HEADER、CONTAINER、FOOTER，其中 CONTAINER 部分又包含了 SIDEBAR、CONTENT、QUICK SIDEB...
阅读 3236·2021-09-22 10:52
阅读 1413·2021-09-09 09:34
阅读 1713·2021-09-09 09:33
阅读 572·2019-08-30 15:54
阅读 2390·2019-08-29 11:15
阅读 610·2019-08-26 13:37
阅读 1544·2019-08-26 12:11
阅读 2849·2019-08-26 12:00
