您的位置：首页 > Web前端 > BootStrap

（转）Bootstrap 之 Metronic 模板的学习之路 - （5）主题&布局配置

2017-06-22 15:42 495 查看
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].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-mobileclasses 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">
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航