(转)Bootstrap 之 Metronic 模板的学习之路 - (2)源码分析之 head 部分
https://segmentfault.com/a/1190000006684122
下面,我们找个目录里面想对较小的文件来分析一下源码结构,我们可以看到,page_general_help.html 页面容量较小,而且显示的元素最全,大的框架架构都已经包含了,我们就从分析这个文件开始。
Beginning of Page 页面开始
Below code is used at the beginning of all HTML pages to detect Internet Explorer browser version and set a spesific class applied to Internet Explorer versions.
所有HTML页面开头都有着下面一段代码来检测 ie 浏览器的版本,并根据不同版本应用特定的类到显示页面。
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
Page Head 页面 Head 部分
Page head contains metadata, javascript and css files:
head 部分包含了 metadata, javascript 和 css 文件:
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8" />
<title>Metronic | Help</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN THEME GLOBAL STYLES -->
<link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
<link href="../assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />
<!-- END THEME GLOBAL STYLES -->
<!-- BEGIN THEME LAYOUT STYLES -->
<link href="../assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/layouts/layout/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color" />
<link href="../assets/layouts/layout/css/custom.min.css" rel="stylesheet" type="text/css" />
<!-- END THEME LAYOUT STYLES -->
<link rel="shortcut icon" href="favicon.ico" /> </head>
<!-- END HEAD -->
meta 标签部分
meta 标签部分和常用 bootstrap 结构类似,就不详述了
谷歌字体的 css 链接
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet"type="text/css" />
这句链接到谷歌字体,可惜谷歌被墙了,你的网站如果包含了这句,想必半响也打不开。网上有很多关于谷歌字体的处理方式,无非就是下载这个 css 文件和 css 文件中对应的字体文件。
我们翻墙后,输入上次链接打开后大概可以看到 css 文件如下图:
可以看到这样的字体有28个,如果有兴趣的朋友,可以一个个去下载下来,放到本地服务器上,然后将 css 文件中的 .woff2 链接修改为你的服务器的链接。
font-awesome 图标字体
<link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
这个想必学习 bootstrap 的都不会陌生,就是加载font-awesome 图标字体。
Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。
有着以下特性:
一个字库,634个图标
无需依赖JavaScript
无限缩放
完全免费,哪怕是商业用途。
只要CSS支持,无论颜色、大小、阴影或者其它任何效果,都可以轻易展现。
支持视网膜屏;
完美兼容 bootstrap 及其它框架
支持桌面应用
可适配于屏幕阅读器。
总之,你不用到处去找图标了。哈哈哈 :D
最新版可以到 http://fontawesome.dashgame.com/ 下载。
simple-line-icons 图标字体
简单线条图标字体,效果如下图
官方网站:https://thesabbir.github.io/s...
或: http://www.stpatsfc.com/asset...
bootstrap.min.css
bootstrap 的基础 css,不展开描述,详见下面两个网站
英文官方网站:http://getbootstrap.com/
中文 bootstrap 网站:http://www.bootcss.com/
bootstrap-switch.min.css 文件
Turn checkboxes and radio buttons in toggle switches.
切换 checkboxes 和 radio 按钮的拨动开关。
Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript:
该组件包括下面这些依赖:jQuery, Bootstrap and Bootstrap Switch CSS + Javascript
官方网站:http://www.bootstrap-switch.org/
以上几个 css 文件是 Metronic 模板必须包含的全局 css 部分。
全局主题样式
<link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
<link href="../assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />
主题布局样式
<link href="../assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/layouts/layout/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color" />
<link href="../assets/layouts/layout/css/custom.min.css" rel="stylesheet" type="text/css" />
网页标签图标
这个想必也没什么好介绍的,注意 favicon.ico 的路径即可。
<link rel="shortcut icon" href="favicon.ico" />
好了,至此,Metronic 源码 head 部分学习完毕。
(转)Bootstrap 之 Metronic 模板的学习之路 - (2)源码分析之 head 部分的更多相关文章
- Bootstrap 之 Metronic 模板的学习之路 - (1)总览
写在前面 bootstrap 的模板非常多,Envato 上有着各种各样的免费及付费模板.Metronic 是我最喜欢的模板之一(看一眼就喜欢上的那种),当前售价 $28 ,觉得赞的,不妨支持一下作者 ...
- (转)Bootstrap 之 Metronic 模板的学习之路 - (1)总览
https://segmentfault.com/a/1190000006673582#articleHeader0 写在前面 bootstrap 的模板非常多,Envato 上有着各种各样的免费及付 ...
- (转)Bootstrap 之 Metronic 模板的学习之路 - (4)源码分析之脚本部分
https://segmentfault.com/a/1190000006709967 上篇我们将 body 标签主体部分进行了简单总览,下面看看最后的脚本部门. 页面结尾部分(Javascripts ...
- (转)Bootstrap 之 Metronic 模板的学习之路 - (5)主题&布局配置
https://segmentfault.com/a/1190000006736457 Theme Setup 主题配置 Metronic comes with 6 color themes,defa ...
- (转)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 ...
- memcached学习笔记——存储命令源码分析下篇
上一篇回顾:<memcached学习笔记——存储命令源码分析上篇>通过分析memcached的存储命令源码的过程,了解了memcached如何解析文本命令和mencached的内存管理机制 ...
- memcached学习笔记——存储命令源码分析上篇
原创文章,转载请标明,谢谢. 上一篇分析过memcached的连接模型,了解memcached是如何高效处理客户端连接,这一篇分析memcached源码中的process_update_command ...
随机推荐
- 【[Offer收割]编程练习赛12 D】 寻找最大值
[题目链接]:http://hihocoder.com/problemset/problem/1496 [题意] [题解] 先把这n个数排个序吧. 这样相邻的数字就在一起了; 这样a[i]&a ...
- 使用Eclipse 创建Spring Boot项目
一.为什么要使用 Spring Boot ? Spring Boot解决的问题 (1) Spring Boot使编码变简单 (2) Spring Boot使配置变简单 (3) Spring Boot使 ...
- python实现字符串之间的映射
类似于凯撒密码一样的加密 # *-* coding=utf-8 *-* import string intab = string.lowercase outtab = 'qwertyuiopasdfg ...
- Likecloud-吃、吃、吃(洛谷 1508)
题目背景 问世间,青春期为何物? 答曰:“甲亢,甲亢,再甲亢:挨饿,挨饿,再挨饿!” 题目描述 正处在某一特定时期之中的李大水牛由于消化系统比较发达,最近一直处在饥饿的状态中.某日上课,正当他饿得头昏 ...
- 洛谷 P1586 四方定理
P1586 四方定理 题目描述 四方定理是众所周知的:任意一个正整数nn,可以分解为不超过四个整数的平方和.例如:25=1^{2}+2^{2}+2^{2}+4^{2}25=12+22+2 ...
- [转]十五天精通WCF——终结篇 那些你需要注意的坑
终于一路走来,到了本系列的最后一篇了,这一篇也没什么好说的,整体知识框架已经在前面的系列文章中讲完了,wcf的配置众多,如果 不加一些指定配置,你可能会遇到一些灾难性的后果,快来一睹为快吧. 一: 第 ...
- 跨平台C++开源码的两种经常使用编译方式
作者:朱金灿 来源:http://blog.csdn.net/clever101 跨平台C++开源代码为适应各种编译器的编译,採用了两种方式方面来适配.一种是makefile方式.以著名的空间数据格式 ...
- 在NSUserDefaults中保存自己定义的对象
在iOS开发中.须要用到一些回调值(从A到B,从B返回时把B中的值带回A中).事实上方法也非常多(delegate,block.nsuserdefaults等).我想用NSUserDefaults回调 ...
- uva 11605 - Lights inside a 3d Grid(概率)
option=com_onlinejudge&Itemid=8&page=show_problem&problem=2652" style=""& ...
- luogu2157 [SDOI2009]学校食堂 局部状压
题目大意 小F 的学校在城市的一个偏僻角落,所有学生都只好在学校吃饭.学校有一个食堂,虽然简陋,但食堂大厨总能做出让同学们满意的菜肴.当然,不同的人口味也不一定相同,但每个人的口味都可以用一个非负整数 ...