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

時間 2019-11-11

標籤 bootstrap metronic 模板學習之路自定義擴展欄目 Bootstarp 简体版

原文原文鏈接

前面咱們將 Metronic 的結構和源碼大體瀏覽了一遍，Metronic 整個文件包有三百多兆，在實際項目中，咱們確定用不到全部文件，這時，咱們須要作一些自定義。css

自定義和擴展

CSS 部分

要重載 Metronic 主題的 CSS 樣式，咱們能夠定製 ../assets/layouts/layout/css/custom.css 這個文件. 若是你保持你本身的 css 代碼分開獨立，這將使得你未來的更新也變得更加容易。html

去除不用的資源

假定你在 7 個可用的子主題中選擇了 Admin 1(admin_1) 子主題.前端
這個主題有兩個部分. 首先是包含了全部 css、js和第三方插件的 assets 文件夾，接着是包含實際 HTML 模板的模板文件夾。能夠參考啓動時調用的 theme/assets 和 theme/admin_1.bootstrap
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 兩個文件夾了.segmentfault
theme/admin_1 文件夾在 layout_blank_page.html 打開時被引用。這個模板包括了壓縮後的 css、js 和第三方插件。你能夠用此模板做爲你應用程序的起點。試着將 layout_blank_page.html 的代碼分離成模塊化(header, sidebar, footer, main content)，並保持每一個頁面局部集中。app
在第三方插件文件夾(theme/assets/global/plugins)，你能夠排除你用不到的插件. 默認 Metronic 包括 80 個第三方插件，大部分主題你不會用到，你能夠將他們排除。框架

JavaScript 插件和資源選擇

Metronic 的 _documentation 文件夾裏面，咱們能夠打開 index.html 查看介紹，其中 12. Javascript Plugins & Resources 這部分的內容能夠方便的讓你瞭解選用某一個插件須要包含哪些文件資源。ide

頁面如圖所示：模塊化

具體每一個插件的介紹我這兒就不一一展開了。工具

升級

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`