正文
（转）Bootstrap 之 Metronic 模板的学习之路 - （5）主题&布局配置
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
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 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 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:
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.
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".
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.
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.
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 模板的学习之路 - （5）主题&布局配置的更多相关文章- Bootstrap 之 Metronic 模板的学习之路 - （1）总览
写在前面 bootstrap 的模板非常多,Envato 上有着各种各样的免费及付费模板.Metronic 是我最喜欢的模板之一(看一眼就喜欢上的那种),当前售价 $28 ,觉得赞的,不妨支持一下作者 ...
- （转）Bootstrap 之 Metronic 模板的学习之路 - （2）源码分析之 head 部分
https://segmentfault.com/a/1190000006684122 下面,我们找个目录里面想对较小的文件来分析一下源码结构,我们可以看到,page_general_help.htm ...
- （转）Bootstrap 之 Metronic 模板的学习之路 - （1）总览
https://segmentfault.com/a/1190000006673582#articleHeader0 写在前面 bootstrap 的模板非常多,Envato 上有着各种各样的免费及付 ...
- （转）Bootstrap 之 Metronic 模板的学习之路 - （4）源码分析之脚本部分
https://segmentfault.com/a/1190000006709967 上篇我们将 body 标签主体部分进行了简单总览,下面看看最后的脚本部门. 页面结尾部分(Javascripts ...
- (转）Bootstrap 之 Metronic 模板的学习之路 - （6）自定义和扩展
https://segmentfault.com/a/1190000006815041 前面我们将 Metronic 的结构和源码大致浏览了一遍,Metronic 整个文件包有三百多兆,在实际项目中, ...
- （转）Bootstrap 之 Metronic 模板的学习之路 - （7）GULP 前端自动化工具
https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要 ...
- （转）Bootstrap 之 Metronic 模板的学习之路 - （3）源码分析之 body 部分
https://segmentfault.com/a/1190000006697252 body 的组成结构 body 部分包含了 HEADER.CONTAINER.FOOTER,其中 CONTAIN ...
- 中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架（asp.net core 2.X+Vue）模板项目学习之路（一） C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明 如何在IIS上发布，并能正常访问
中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...
- ABP框架（asp.net core 2.X+Vue）模板项目学习之路（一）
前言: 第一次接触ABP的项目是在2018年6月份,但是当时没有深入具体的研究,而今天因为工作的需要,需要学习.了解这个框架,在时隔半年之后,今天重新下载了这个项目,虽然在园子里有很多前辈们写的这类的 ...
随机推荐- 湖南附中模拟day1 瞭望塔
/* 这个题要用到树的性质,一般比较难的图论题会往这方面靠拢,这样用很容易出错,应该先写暴力,然后再去一点点想正解 */ //暴力70分 #include<iostream> #inclu ...
- .Net Mvc3框架调用服务端控件解决方案
/*BY:Wangyexin date:2011年4月30日 20:17:38*/ /*说明:.net mvc3框架,View层调用服务端控件,输出到.cshtml文件中显示*/ 1.先说说.ne ...
- mysql5.6版本开启数据库查询日志方法
在my.ini中的[mysqld]下添加了以下两行代码: general_log=ONgeneral_log_file = c:/mysql.log 这个log文件是可以用文本编辑工具如editplu ...
- @Resource注解
原文地址:http://blog.sina.com.cn/s/blog_a795a96f01016if1.html @Resource 注解被用来激活一个命名资源(named resource)的 ...
- 任何时候都适用的20个C++技巧
这些小技巧之所以特别,是因为这些信息通常吧不能在C++书籍或者网站上找到.比如说,成员指针,即使对于高级程序员也是比较棘手,和易于产生bugs的,是应该尽量避免的问题之一. <翻 by凌云健笔& ...
- Python（一）字符串用法
一.程序输出 :print 在Python2.X中,print 的用法是 : print "hello word! " 在Python3.X中,print作为函数的方式出现,用法: ...
- 【python-opencv】几何变换
"""几何变换-缩放""" img = cv.imread(r'pictures\family.jpg') ""&quo ...
- TOML 详解
TOML的由来 配置文件的使用由来已久,从.ini.XML.JSON.YAML再到TOML,语言的表达能力越来越强,同时书写便捷性也在不断提升. TOML是前GitHub CEO, Tom Prest ...
- ASP.NET MVC中在Action获取提交的表单数据方法
有Index视图如下: 视图代码如下: <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Mas ...
- web安全开发指南--权限管理
2.1 访问控制安全规则 1 访问控制必须只能在服务器端执行. 2 只通过session来判定用户的真实身份,避免使用其它数据域的参数(比如来自cookie.hidden域 ...
写在前面 bootstrap 的模板非常多,Envato 上有着各种各样的免费及付费模板.Metronic 是我最喜欢的模板之一(看一眼就喜欢上的那种),当前售价 $28 ,觉得赞的,不妨支持一下作者 ...
https://segmentfault.com/a/1190000006684122 下面,我们找个目录里面想对较小的文件来分析一下源码结构,我们可以看到,page_general_help.htm ...
https://segmentfault.com/a/1190000006673582#articleHeader0 写在前面 bootstrap 的模板非常多,Envato 上有着各种各样的免费及付 ...
https://segmentfault.com/a/1190000006709967 上篇我们将 body 标签主体部分进行了简单总览,下面看看最后的脚本部门. 页面结尾部分(Javascripts ...
https://segmentfault.com/a/1190000006815041 前面我们将 Metronic 的结构和源码大致浏览了一遍,Metronic 整个文件包有三百多兆,在实际项目中, ...
https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要 ...
https://segmentfault.com/a/1190000006697252 body 的组成结构 body 部分包含了 HEADER.CONTAINER.FOOTER,其中 CONTAIN ...
中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...
前言: 第一次接触ABP的项目是在2018年6月份,但是当时没有深入具体的研究,而今天因为工作的需要,需要学习.了解这个框架,在时隔半年之后,今天重新下载了这个项目,虽然在园子里有很多前辈们写的这类的 ...
- 湖南附中模拟day1 瞭望塔
/* 这个题要用到树的性质,一般比较难的图论题会往这方面靠拢,这样用很容易出错,应该先写暴力,然后再去一点点想正解 */ //暴力70分 #include<iostream> #inclu ...
- .Net Mvc3框架调用服务端控件解决方案
/*BY:Wangyexin date:2011年4月30日 20:17:38*/ /*说明:.net mvc3框架,View层调用服务端控件,输出到.cshtml文件中显示*/ 1.先说说.ne ...
- mysql5.6版本开启数据库查询日志方法
在my.ini中的[mysqld]下添加了以下两行代码: general_log=ONgeneral_log_file = c:/mysql.log 这个log文件是可以用文本编辑工具如editplu ...
- @Resource注解
原文地址:http://blog.sina.com.cn/s/blog_a795a96f01016if1.html @Resource 注解被用来激活一个命名资源(named resource)的 ...
- 任何时候都适用的20个C++技巧
这些小技巧之所以特别,是因为这些信息通常吧不能在C++书籍或者网站上找到.比如说,成员指针,即使对于高级程序员也是比较棘手,和易于产生bugs的,是应该尽量避免的问题之一. <翻 by凌云健笔& ...
- Python（一）字符串用法
一.程序输出 :print 在Python2.X中,print 的用法是 : print "hello word! " 在Python3.X中,print作为函数的方式出现,用法: ...
- 【python-opencv】几何变换
"""几何变换-缩放""" img = cv.imread(r'pictures\family.jpg') ""&quo ...
- TOML 详解
TOML的由来 配置文件的使用由来已久,从.ini.XML.JSON.YAML再到TOML,语言的表达能力越来越强,同时书写便捷性也在不断提升. TOML是前GitHub CEO, Tom Prest ...
- ASP.NET MVC中在Action获取提交的表单数据方法
有Index视图如下: 视图代码如下: <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Mas ...
- web安全开发指南--权限管理
2.1 访问控制安全规则 1 访问控制必须只能在服务器端执行. 2 只通过session来判定用户的真实身份,避免使用其它数据域的参数(比如来自cookie.hidden域 ...
