(转）Bootstrap 之 Metronic 模板的学习之路

https://segmentfault.com/a/1190000006815041

前面我们将 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 一些主要 class 改变

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...。

在升级之前，请不要忘了备份你的文件。