資訊專欄INFORMATION COLUMN
摘要：你可以用此模板作為你應(yīng)用程序的起點(diǎn)。上一篇之模板的學(xué)習(xí)之路主題布局配置下一篇之模板的學(xué)習(xí)之路前端自動(dòng)化工具
前面我們將 Metronic 的結(jié)構(gòu)和源碼大致瀏覽了一遍，Metronic 整個(gè)文件包有三百多兆，在實(shí)際項(xiàng)目中，我們肯定用不到所有文件，這時(shí)，我們需要做一些自定義。
自定義和擴(kuò)展 CSS 部分要重載 Metronic 主題的 CSS 樣式，我們可以定制 ../assets/layouts/layout/css/custom.css 這個(gè)文件. 如果你保持你自己的 css 代碼分開(kāi)獨(dú)立，這將使得你將來(lái)的更新也變得更加容易。
去除不用的資源假定你在 7 個(gè)可用的子主題中選擇了 Admin 1(admin_1) 子主題.
這個(gè)主題有兩個(gè)部分. 首先是包含了所有 css、js和第三方插件的 assets 文件夾，接著是包含實(shí)際 HTML 模板的模板文件夾。可以參考啟動(dòng)時(shí)調(diào)用的 theme/assets 和 theme/admin_1.
theme/assets 的 layout 文件夾里你可以發(fā)現(xiàn)有 7 個(gè)獨(dú)立的 layout 文件夾（如 layout，layou2, ... layout7）,你可以保留你用到的 theme/assets/layouts/layout 和 theme/layouts/global 然后將你用不到的 layout 文件夾刪除。 這樣在 theme/assets/layouts 文件夾里你就只有 theme/assets/layouts/layout 和 theme/assets/layouts/global 兩個(gè)文件夾了.
theme/admin_1 文件夾在 layout_blank_page.html 打開(kāi)時(shí)被引用。這個(gè)模板包括了壓縮后的 css、js 和第三方插件。你可以用此模板作為你應(yīng)用程序的起點(diǎn)。試著將 layout_blank_page.html 的代碼分離成模塊化(header, sidebar, footer, main content)，并保持每個(gè)頁(yè)面局部集中。
在第三方插件文件夾(theme/assets/global/plugins)，你可以排除你用不到的插件. 默認(rèn) Metronic 包括 80 個(gè)第三方插件， 大部分主題你不會(huì)用到，你可以將他們排除。
JavaScript 插件和資源選擇Metronic 的 _documentation 文件夾里面，我們可以打開(kāi) index.html 查看介紹，其中 12. Javascript Plugins & Resources 這部分的內(nèi)容可以方便的讓你了解選用某一個(gè)插件需要包含哪些文件資源。
頁(yè)面如圖所示：
具體每個(gè)插件的介紹我這兒就不一一展開(kāi)了。
升級(jí)Metronic 從 v1.5.x 開(kāi)始采用 Bootstrap 3.0 框架, 作者更新了全部主題并升級(jí)了大部分第三方插件和資源。從 2.x 遷移到 3.0 最好的方式是首先升級(jí)你的頁(yè)面 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 |
關(guān)于更多 Bootstrap 從 2.x 遷移到 3.0，請(qǐng)看官方的說(shuō)明：http://getbootstrap.com/getti...。
在升級(jí)之前，請(qǐng)不要忘了備份你的文件。
上一篇：Bootstrap 之 Metronic 模板的學(xué)習(xí)之路 - （5）主題&布局配置
下一篇：Bootstrap 之 Metronic 模板的學(xué)習(xí)之路 - （7）GULP 前端自動(dòng)化工具
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/111530.html
摘要：你可以用此模板作為你應(yīng)用程序的起點(diǎn)。上一篇之模板的學(xué)習(xí)之路主題布局配置下一篇之模板的學(xué)習(xí)之路前端自動(dòng)化工具 前面我們將 Metronic 的結(jié)構(gòu)和源碼大致瀏覽了一遍，Metronic 整個(gè)文件包有三百多兆，在實(shí)際項(xiàng)目中，我們肯定用不到所有文件，這時(shí)，我們需要做一些自定義。 自定義和擴(kuò)展 CSS 部分 要重載 Metronic 主題的 CSS 樣式，我們可以定制 ../assets/la...
摘要：寫(xiě)在前面的模板非常多，上有著各種各樣的免費(fèi)及付費(fèi)模板。概述是一個(gè)基于設(shè)計(jì)的自適應(yīng)多用途的管理后臺(tái)模板。下一篇之模板的學(xué)習(xí)之路源碼分析之部分 寫(xiě)在前面 bootstrap 的模板非常多，Envato 上有著各種各樣的免費(fèi)及付費(fèi)模板。Metronic 是我最喜歡的模板之一（看一眼就喜歡上的那種），當(dāng)前售價(jià) $28 ，覺(jué)得贊的，不妨支持一下作者。覺(jué)得貴的，想必不用我說(shuō)，你也會(huì)找到途徑。:b ...
摘要：的組成結(jié)構(gòu)部分包含了，其中部分又包含了幾個(gè)部分。代碼如下圖內(nèi)容展示截圖代碼截圖快捷欄展示截圖代碼截圖頁(yè)面底部展示截圖代碼截圖上一篇之模板的學(xué)習(xí)之路源碼分析之部分下一篇之模板的學(xué)習(xí)之路源碼分析之腳本部分 body 的組成結(jié)構(gòu) body 部分包含了 HEADER、CONTAINER、FOOTER，其中 CONTAINER 部分又包含了 SIDEBAR、CONTENT、QUICK SIDEB...
閱讀 3560·2021-09-22 10:52
閱讀 1588·2021-09-09 09:34
閱讀 1990·2021-09-09 09:33
閱讀 757·2019-08-30 15:54
閱讀 2596·2019-08-29 11:15
閱讀 713·2019-08-26 13:37
閱讀 1667·2019-08-26 12:11
閱讀 2975·2019-08-26 12:00
