Bootstrap 之 Metronic 模板的學習之路 - （6）自定義和擴展

aaron 發布于2019-08-20 10:48 / 2426人閱讀

摘要：你可以用此模板作為你應用程序的起點。上一篇之模板的學習之路主題布局配置下一篇之模板的學習之路前端自動化工具

前面我們將 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...。

在升級之前，請不要忘了備份你的文件。

上一篇：Bootstrap 之 Metronic 模板的學習之路 - （5）主題&布局配置
下一篇：Bootstrap 之 Metronic 模板的學習之路 - （7）GULP 前端自動化工具

GPU云服務器云服務器機器學習學習之路網站模板 bootstrap 機器學習之路 python學習之路

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80328.html

Bootstrap 之 Metronic 模板的學習之路 - （6）自定義和擴展

摘要：你可以用此模板作為你應用程序的起點。上一篇之模板的學習之路主題布局配置下一篇之模板的學習之路前端自動化工具前面我們將 Metronic 的結構和源碼大致瀏覽了一遍，Metronic 整個文件包有三百多兆，在實際項目中，我們肯定用不到所有文件，這時，我們需要做一些自定義。自定義和擴展 CSS 部分要重載 Metronic 主題的 CSS 樣式，我們可以定制 ../assets/la...

MoAir 2019-08-29 11:15 評論0 收藏0
Bootstrap 之 Metronic 模板的學習之路 - （1）總覽

摘要：寫在前面的模板非常多，上有著各種各樣的免費及付費模板。概述是一個基于設計的自適應多用途的管理后臺模板。下一篇之模板的學習之路源碼分析之部分寫在前面 bootstrap 的模板非常多，Envato 上有著各種各樣的免費及付費模板。Metronic 是我最喜歡的模板之一（看一眼就喜歡上的那種），當前售價 $28 ，覺得贊的，不妨支持一下作者。覺得貴的，想必不用我說，你也會找到途徑。:b ...

stackfing 2019-08-29 11:08 評論0 收藏0
Bootstrap 之 Metronic 模板的學習之路 - （3）源碼分析之 body 部分

摘要：的組成結構部分包含了，其中部分又包含了幾個部分。代碼如下圖內容展示截圖代碼截圖快捷欄展示截圖代碼截圖頁面底部展示截圖代碼截圖上一篇之模板的學習之路源碼分析之部分下一篇之模板的學習之路源碼分析之腳本部分 body 的組成結構 body 部分包含了 HEADER、CONTAINER、FOOTER，其中 CONTAINER 部分又包含了 SIDEBAR、CONTENT、QUICK SIDEB...

afishhhhh 2019-08-29 11:10 評論0 收藏0