https://segmentfault.com/a/1190000006736457
Theme Setup 主題配置
Metronic comes with 6 color themes,
default,darkblue,blue,grey,light,light2. To setup a selected theme. Include../assets/layouts/layout/css/themes/[theme_name].cssin page head. For instance, if you like to use blue theme, include../assets/layouts/layout/css/themes/darkblue.csscss file. CSS file load order should be followed as shown below:
Metronic 具有6中色彩主題，default, darkblue, blue, grey, light, light2.要部署一種主題，你需要包含../assets/layouts/layout/css/themes/[theme_name].css 在頁面的 head 部分。
例如，你喜歡藍色主題，包含../assets/layouts/layout/css/themes/darkblue.css css 文件。CSS 文件調用命令如下：
<link href="../assets/layouts/layout/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>Theme Style 主題樣式
Metronic by default comes with "square corners" style. To change it to "rounded corners" just change "components.css" to "components-rounded.css" as shown below:
Metronic 默認采用直角樣式，若要改為圓角，只需要改變 "components.css" 為 "components-rounded.css"即可。如下所示：
<link href="../assets/global/css/components-rounded.css" rel="stylesheet" type="text/css" id="style_components"/>Layout Settings 布局配置
The best way to learn how to use Metronic's available layout options, please go to one of Metronic pages and use the "Theme Settings" panel located at the top right of the page. Choose you preferred layout options, and use Chrome's Developer Tool and Firefox's Firebug Tool to see the HTML code changes upon you select your layout combination. When you change the laypout option, mostly some css classes will be added into the page's body element. When you change the layout settings only the most parent HTML elements will be modified, the page content part remains as it is.
To learn how to use the browser developer tools you can refer to below links:
了解如何使用 Metronic 可用布局選項的最好的方式，就是打開 Metronic 頁面，使用位於頁面右上角的 "Theme Settings" 面板。選擇你的首選布局選項，當你的布局組合變化時，采用 Chrome 開發工具或者 Firefox 的 Firebug 工具去看 HTML 源碼改變。當你改變某個布局選項，通常一些 css 樣式會增加到你的頁面主體元素中。當你改變布局設置，僅僅這最高父 HTML 元素被改變，頁面內容則保持原樣。
如何使用瀏覽器開發工具，你可以
Fixed Header & Footer On Mobile Devices 在移動設備上固定頭部或底部
If fixed header or footer is set then by default these features will be disabled on mobile devices. To force the fixed header & footer on mobile devices you will need to apply page-footer-fixed page-footer-fixed-mobile and page-header-fixed page-header-fixed-mobile classes to the HTML body element accordingly.
在移動設備上，頂部和底部固定這個效果默認是禁止的。如果要想在設置這個選項，你需要定位到移動設備的頭部或底部，並應用page-footer-fixed page-footer-fixed-mobile 和 page-header-fixed page-header-fixed-mobile 類到 HTML 相應的主體元素上。
Sidebar Menu Settings 側邊欄菜單配置
By default the sidebar menu comes with data-auto-scroll="true" and data-slide-speed="200" settings. To disable the auto scrolling feature of the sidebar menu apply data-auto-scroll="false" parameter to the sidebar menu's HTML tag(page-sidebar-menu). To change the submenu's slide speed apply a new value as data-slide-speed="300".
默認的側邊欄菜單帶有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">Sidebar Menu Light Style 側邊欄 Light 樣式
To use the light sidebar menu style you will need to apply page-sidebar-menu-light class right after page-sidebar-menu class.
用着淺色側邊欄樣式，你需要應用 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">Sidebar Menu With Hover Submenus 側邊欄菜單彈出子菜單模式
To use this feature you will need to apply page-sidebar-menu-hover-submenu class right after page-sidebar-menu class.
要啟用這個效果你需要應用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">