Metronic学习之路
簡介
1.Metronic?是一個基于 Bootstrap 3.* 設計的自適應、多用途的管理后臺模板。
2.HTML頁面開頭都有著下面一段代碼來檢測 ie 瀏覽器的版本，并根據不同版本應用特定的類到顯示頁面。
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]--> <!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]--> <!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->head部分
3.head 部分包含了 meta，css，和懶加載的 js和 css 文件。
4.谷歌字體的 css 鏈接。
<link?href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all"?rel="stylesheet"type="text/css"?/>
這句鏈接到谷歌字體，可惜谷歌被墻了，你的網站如果包含了這句，想必半響也打不開。網上有很多關于谷歌字體的處理方式，無非就是下載這個 css 文件和 css 文件中對應的字體文件。
5.font-awesome 圖標字體
<link?href="../assets/global/plugins/font-awesome/css/font-awesome.min.css"?rel="stylesheet"?type="text/css"?/>這個想必學習 bootstrap 的都不會陌生，就是加載font-awesome 圖標字體。
Font Awesome為您提供可縮放的矢量圖標，您可以使用CSS所提供的所有特性對它們進行更改，包括：大小、顏色、陰影或者其它任何支持的效果。
-
一個字庫，634個圖標
-
無需依賴JavaScript
-
無限縮放
-
完全免費，哪怕是商業用途。
-
只要CSS支持，無論顏色、大小、陰影或者其它任何效果，都可以輕易展現。
-
支持視網膜屏；
-
完美兼容 bootstrap 及其它框架
-
支持桌面應用
-
可適配于屏幕閱讀器。
最新版可以到?http://fontawesome.dashgame.com/?下載。
?
6.simple-line-icons?簡單線條圖標字體
<link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
7.bootstrap-switch.min.css 文件
切換 checkboxes 和 radio 按鈕的撥動開關。
該組件包括下面這些依賴：jQuery, Bootstrap and Bootstrap Switch CSS + Javascript
官方網站：http://www.bootstrap-switch.org/
8.以上幾個 css 文件是 Metronic 模板必須包含的全局 css 部分。
9.全局主題樣式
<link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" /> <link href="../assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />10.主題布局樣式
<link href="../assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css" /> <link href="../assets/layouts/layout/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color" /> <link href="../assets/layouts/layout/css/custom.min.css" rel="stylesheet" type="text/css" />11.網頁標簽圖標
<link?rel="shortcut icon"?href="favicon.ico"?/>?
body的組成結構
12.body 部分包含了 HEADER、CONTAINER、FOOTER，其中 CONTAINER 部分又包含了 SIDEBAR、CONTENT、QUICK SIDEBAR 幾個部分
?
Javascripts 腳本文件
13.看完html結構后我們發現，所有腳本都在?</body>?之前，這主要是因為以下一些原因
-
為什么放在最后
HTML 文件的加載都是從上往下執行的，我們一般習慣將一些對顯示效果影響不大的腳本文件放到頁面的最后進行加載。這樣可以減少頁面的加載時間。
-
為什么放在?</body>?之前
只所以腳本放在?</body>?之前，而不是之后，主要是因為：基于規則 %html.content "HEAD|BODY"，HTML 標簽的子元素只能是 HEAD BODY，如果在?</body>?后再出現?<script>?或任何元素的開始標簽，都是?parse error。當然，瀏覽器一般均有容錯機制。錯誤嵌套的標簽、以及位置放置錯誤的標簽都會在paser HTML 過程中嘗試修復。修復后得到合法的HTML后在由布局引擎建立相應的DOM對象。在<script>標簽放置于</body>標簽之后時，源碼被所有瀏覽器【泛指PC上常見的】修復為正常形式，即<script></script></body>。
14.Metronic 用了幾十個插件和擴展資源，這才使得這個模板顯得尤為強大。具體這些插件的可以在html結構里了解。
?
主題配置
15.Metronic 具有6中色彩主題，default,?darkblue,?blue,?grey,?light,?light2.要部署一種主題，你需要包含../assets/layouts/layout/css/themes/[theme_name].css?在頁面的?head?部分。
<link?href="../assets/layouts/layout/css/themes/default.css"?rel="stylesheet"?type="text/css"id="style_color"/>?
Theme Style 主題樣式
16.Metronic 默認采用直角樣式，若要改為圓角，只需要改變 "components.css" 為 "components-rounded.css"即可。如下所示：
<link?href="../assets/global/css/components-rounded.css"?rel="stylesheet"?type="text/css"id="style_components"/>?
布局配置
17.了解如何使用 Metronic 可用布局選項的最好的方式，就是打開 Metronic 頁面，使用位于頁面右上角的?"Theme Settings"?面板。選擇你的首選布局選項，當你的布局組合變化時，采用 Chrome 開發工具或者 Firefox 的 Firebug 工具去看 HTML 源碼改變。當你改變某個布局選項，通常一些 css 樣式會增加到你的頁面主體元素中。當你改變布局設置，僅僅這最高父 HTML 元素被改變，頁面內容則保持原樣。
?
在移動設備上固定頭部或底部
18.在移動設備上，頂部和底部固定這個效果默認是禁止的。如果要想在設置這個選項，你需要定位到移動設備的頭部或底部，并應用page-footer-fixed page-footer-fixed-mobile?和?page-header-fixed page-header-fixed-mobile?類到 HTML 相應的主體元素上。
?
側邊欄菜單配置
19.默認的側邊欄菜單帶有data-auto-scroll="true"和data-slide-speed="200"配置。若要禁用側邊欄的自動滾動效果，應用data-auto-scroll="false"到page-sidebar-menu標簽。要改變子菜單滑動速度，則設置一個新的值data-slide-speed="300"。
<ul?class="page-sidebar-menu page-header-fixed"?data-keep-expanded="false"?data-auto-scroll="true"?data-slide-speed="300"?style="padding-top: 20px">?
側邊欄?Light?樣式
20.用著淺色側邊欄樣式，你需要應用?page-sidebar-menu-light?class 屬性在?page-sidebar-menu?class 屬性后面。
<ul?class="page-sidebar-menu page-sidebar-menu-light page-header-fixed "?data-keep-expanded="false"?data-auto-scroll="true"?data-slide-speed="200"?style="padding-top: 20px">?
側邊欄菜單彈出子菜單模式
21.要啟用這個效果你需要應用page-sidebar-menu-hover-submenu?在?page-sidebar-menu?樣式后。
<ul?class="page-sidebar-menu page-sidebar-menu-hover-submenu page-header-fixed "?data-keep-expanded="false"data-auto-scroll="true"?data-slide-speed="200"?style="padding-top: 20px">?
擴展css部分
22.要重載 Metronic 主題的 CSS 樣式，我們可以定制?../assets/layouts/layout/css/custom.css?這個文件. 如果你保持你自己的 css 代碼分開獨立，這將使得你將來的更新也變得更加容易。
?
去除不用的資源
?
23.假定你在 7 個可用的子主題中選擇了?Admin 1(admin_1)?子主題.
24.這個主題有兩個部分. 首先是包含了所有 css、js和第三方插件的?assets?文件夾，接著是包含實際 HTML 模板的模板文件夾。可以參考啟動時調用的?theme/assets?和?theme/admin_1.
25.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?兩個文件夾了.
26.theme/admin_1?文件夾在?layout_blank_page.html?打開時被引用。這個模板包括了壓縮后的 css、js 和第三方插件。你可以用此模板作為你應用程序的起點。試著將?layout_blank_page.html?的代碼分離成模塊化(header, sidebar, footer, main content)，并保持每個頁面局部集中。
27.在第三方插件文件夾(theme/assets/global/plugins)，你可以排除你用不到的插件. 默認 Metronic 包括 80 個第三方插件， 大部分主題你不會用到，你可以將他們排除。
?
?
JavaScript 插件和資源選擇
28.Metronic 的?_documentation?文件夾里面，我們可以打開?index.html?查看介紹，其中?12. Javascript Plugins & Resources?這部分的內容可以方便的讓你了解選用某一個插件需要包含哪些文件資源。
?
轉載于:https://www.cnblogs.com/yanjialin/p/6003475.html
總結
以上是生活随笔為你收集整理的Metronic学习之路的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux作业9
- 下一篇： docker拷贝文件