Bootstrap 之 Metronic 模板的學習之路 - （5）主題&佈局配置

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].css in page head. For instance, if you like to use blue theme, include ../assets/layouts/layout/css/themes/darkblue.css css 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 元素被改變，頁面內容則保持原樣。

如何使用瀏覽器開發工具，你能夠

• https://developer.mozilla.org...

• https://developers.google.com...

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">

---

上一篇：Bootstrap 之 Metronic 模板的學習之路 - （4）源碼分析之腳本部分
下一篇：Bootstrap 之 Metronic 模板的學習之路 - （6）自定義和擴展