(转)Bootstrap 之 Metronic 模板的学习之路 - (6)自定义和扩展
https://segmentfault.com/a/1190000006815041
前面我们将 Metronic 的结构和源码大致浏览了一遍,Metronic 整个文件包有三百多兆,在实际项目中,我们肯定用不到所有文件,这时,我们需要做一些自定义。
自定义和扩展
CSS 部分
要重载 Metronic 主题的 CSS 样式,我们可以定制 ../assets/layouts/layout/css/custom.css
这个文件. 如果你保持你自己的 css 代码分开独立,这将使得你将来的更新也变得更加容易。
去除不用的资源
假定你在 7 个可用的子主题中选择了
Admin 1(admin_1)
子主题.这个主题有两个部分. 首先是包含了所有 css、js和第三方插件的
assets
文件夹,接着是包含实际 HTML 模板的模板文件夹。可以参考启动时调用的theme/assets
和theme/admin_1
.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
两个文件夹了.theme/admin_1
文件夹在layout_blank_page.html
打开时被引用。这个模板包括了压缩后的 css、js 和第三方插件。你可以用此模板作为你应用程序的起点。试着将layout_blank_page.html
的代码分离成模块化(header, sidebar, footer, main content),并保持每个页面局部集中。在第三方插件文件夹(
theme/assets/global/plugins
),你可以排除你用不到的插件. 默认 Metronic 包括 80 个第三方插件, 大部分主题你不会用到,你可以将他们排除。
JavaScript 插件和资源选择
Metronic 的 _documentation
文件夹里面,我们可以打开 index.html
查看介绍,其中 12. Javascript Plugins & Resources
这部分的内容可以方便的让你了解选用某一个插件需要包含哪些文件资源。
页面如图所示:
具体每个插件的介绍我这儿就不一一展开了。
升级
Metronic 从 v1.5.x
开始采用 Bootstrap 3.0
框架, 作者更新了全部主题并升级了大部分第三方插件和资源。从 2.x 迁移到 3.0 最好的方式是首先升级你的页面 header
, top bar menu
, sidebar menu
和 footer
部分。然后处理 content
和 UI 组件
。
Metronic 一些主要 class 改变
Major Metronic Class Changes
Older Versions | Metronic 1.5 |
---|---|
.m-wrap |
.form-control |
.btn |
.btn .default |
.xsmall |
.input-xsmall |
.small |
.input-small |
.medium |
.input-medium |
.large |
.input-large |
Bootstrap 一些主要 class 改变
Bootstrap 2.x | Bootstrap 3.0 |
---|---|
.container-fluid |
.container |
.row-fluid |
.row |
.span* |
.col-md-* |
.offset* |
.col-md-offset-* |
.brand |
.navbar-brand |
.nav-collapse |
.navbar-collapse |
.nav-toggle |
.navbar-toggle |
.btn-navbar |
.navbar-btn |
.hero-unit |
.jumbotron |
.icon-* .glyphicon |
.glyphicon-* |
.btn .btn |
.btn-default |
.btn-mini |
.btn-xs |
.btn-small |
.btn-sm |
.btn-large |
.btn-lg |
.visible-phone |
.visible-sm |
.visible-tablet |
.visible-md |
.visible-desktop |
.visible-lg |
.hidden-phone |
.hidden-sm |
.hidden-tablet |
.hidden-md |
.hidden-desktop |
.hidden-lg |
.input-small |
.input-sm |
.input-large |
.input-lg |
.checkbox.inline .radio.inline |
.checkbox-inline .radio-inline |
.input-prepend .input-append |
.input-group |
.add-on |
.input-group-addon |
.thumbnail |
.img-thumbnail |
ul.unstyled |
.list-unstyled |
ul.inline |
.list-inline |
关于更多 Bootstrap 从 2.x 迁移到 3.0,请看官方的说明:http://getbootstrap.com/getti...。
在升级之前,请不要忘了备份你的文件。
(转)Bootstrap 之 Metronic 模板的学习之路 - (6)自定义和扩展的更多相关文章
- 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 模板的学习之路 - (7)GULP 前端自动化工具
https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要 ...
- (转)Bootstrap 之 Metronic 模板的学习之路 - (5)主题&布局配置
https://segmentfault.com/a/1190000006736457 Theme Setup 主题配置 Metronic comes with 6 color themes,defa ...
- (转)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如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...
- 『NiFi 学习之路』自定义 —— 组件的自定义及使用
一.概述 许多业务仅仅使用官方提供的组件不能够满足性能上的需求,往往要通过高度可定制的组件来完成特定的业务需求. 而 NiFi 提供了自定义组件的这种方式. 二.自定义 Processor 占坑待续 ...
随机推荐
- 填坑...P1546 最短网络 Agri-Net
P1546 最短网络 Agri-Net 难度普及/提高- 时空限制1s / 128MB 题目背景 农民约翰被选为他们镇的镇长!他其中一个竞选承诺就是在镇上建立起互联网,并连接到所有的农场.当然,他需要 ...
- URAL - 1114-Boxes (分步乘法原理)
题意; 给你n个盘子,A个红球,B个黑球,放的时候没有限制,可以不放,可以放一个红球,可以放一个黑球,也可以两个同时放,可以有剩余的球. 求一共有多少放法. 思路: 可以利用分步乘法原理,红球和黑球是 ...
- Codeforces 805D/804B - Minimum number of steps
传送门:http://codeforces.com/contest/805/problem/D 对于一个由‘a’.‘b’组成的字符串,有如下操作:将字符串中的一个子串“ab”替换成“bba”.当字符串 ...
- 阿里云oss用做文件存储工具类
package com.fsk.fsksystem.util; import java.io.IOException; import java.io.InputStream; import java. ...
- luogu P4238 多项式求逆 (模板题、FFT)
手动博客搬家: 本文发表于20181125 13:21:46, 原地址https://blog.csdn.net/suncongbo/article/details/84485718 题目链接: ht ...
- asp怎么实现二级联动下拉菜单
rs为一级栏目的记录集 rs2为二级栏目的记录集 分别替换成你自己的记录集名称就好了 <script language="JavaScript"> var onecou ...
- HDU 1240
#include <iostream> #include <cstdio> using namespace std; ; char maze[MAX][MAX][MAX]; s ...
- [Cypress] Find and Test Focused Input with Chrome’s DevTools in Cypress
In this lesson, we’ll add tests that finds a focused input. We’ll use Chrome’s dev tools from inside ...
- 高速学会Mac上托管代码到github(具体解释)
之前最開始的时候就一直在github浏览下载各种代码,然后弄了一下代码上传不知道咋弄就不了了之了.刚好近期有空余时间就研究了下github托管代码,这里就具体说说怎样高速的学会github上传你的代码 ...
- 微信企业号开发:UserAgent
userAgent 属性是一个仅仅读的字符串,声明了浏览器用于 HTTP 请求的用户代理头 的值.微信企业号的打开网页的userAgent又包括那些信息呢? 使用userAgent能够推断用户訪问的浏 ...