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 部分的更多相关文章

  1. Bootstrap 之 Metronic 模板的学习之路 - (1)总览

    写在前面 bootstrap 的模板非常多,Envato 上有着各种各样的免费及付费模板.Metronic 是我最喜欢的模板之一(看一眼就喜欢上的那种),当前售价 $28 ,觉得赞的,不妨支持一下作者 ...

  2. (转)Bootstrap 之 Metronic 模板的学习之路 - (1)总览

    https://segmentfault.com/a/1190000006673582#articleHeader0 写在前面 bootstrap 的模板非常多,Envato 上有着各种各样的免费及付 ...

  3. (转)Bootstrap 之 Metronic 模板的学习之路 - (4)源码分析之脚本部分

    https://segmentfault.com/a/1190000006709967 上篇我们将 body 标签主体部分进行了简单总览,下面看看最后的脚本部门. 页面结尾部分(Javascripts ...

  4. (转)Bootstrap 之 Metronic 模板的学习之路 - (5)主题&布局配置

    https://segmentfault.com/a/1190000006736457 Theme Setup 主题配置 Metronic comes with 6 color themes,defa ...

  5. (转)Bootstrap 之 Metronic 模板的学习之路 - (6)自定义和扩展

    https://segmentfault.com/a/1190000006815041 前面我们将 Metronic 的结构和源码大致浏览了一遍,Metronic 整个文件包有三百多兆,在实际项目中, ...

  6. (转)Bootstrap 之 Metronic 模板的学习之路 - (7)GULP 前端自动化工具

    https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要 ...

  7. (转)Bootstrap 之 Metronic 模板的学习之路 - (3)源码分析之 body 部分

    https://segmentfault.com/a/1190000006697252 body 的组成结构 body 部分包含了 HEADER.CONTAINER.FOOTER,其中 CONTAIN ...

  8. memcached学习笔记——存储命令源码分析下篇

    上一篇回顾:<memcached学习笔记——存储命令源码分析上篇>通过分析memcached的存储命令源码的过程,了解了memcached如何解析文本命令和mencached的内存管理机制 ...

  9. memcached学习笔记——存储命令源码分析上篇

    原创文章,转载请标明,谢谢. 上一篇分析过memcached的连接模型,了解memcached是如何高效处理客户端连接,这一篇分析memcached源码中的process_update_command ...

随机推荐

  1. 【codeforces 515A】Drazil and Date

    [题目链接]:http://codeforces.com/contest/515/problem/A [题意] 每次只能走到相邻的四个格子中的一个; 告诉你最后走到了(a,b)走了多少步->s ...

  2. MINSUB - Largest Submatrix

    MINSUB - Largest Submatrix no tags  You are given an matrix M (consisting of nonnegative integers) a ...

  3. eventlet学习笔记

    eventlet学习笔记 标签(空格分隔): python eventlet eventlet是一个用来处理和网络相关的python库函数,且可以通过协程(coroutines)实现并发.在event ...

  4. N天学习一个linux命令之ssh-keygen

    用途 生成ssh加密算法需要使用到的秘钥以及管理和转换 用法 ssh-keygen [-q] [-b bits] -t type [-N new_passphrase] [-C comment] [- ...

  5. IE新发现

    近期用thinkphp写的小程序在IE上測试的时候偶然发现原来IE不兼容的不止是样式啊!!! 震惊哭了~ 在火狐上面嗖嗖的一点bug也没有,在IE上面跟死水一样.. .. 那么问题来了:我的问题是出如 ...

  6. Python图像处理库PIL中图像格式转换(一)

    在数字图像处理中,针对不同的图像格式有其特定的处理算法. 所以,在做图像处理之前,我们须要考虑清楚自己要基于哪种格式的图像进行算法设计及事实上现.本文基于这个需求.使用python中的图像处理库PIL ...

  7. iOS 基础类解析 - NSString、NSMutableString

    iOS 基础类解析 - NSString 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 ...

  8. luogu1726 上白泽慧音

    题目大意 求一个有向图含节点数最多且结点编号从小到大排列字典序最小的强连通分量. 注意事项 HDU1269那道题题面.数据太弱,在这道题上把我害惨了... Dfs点u时,如果与u相连的一个点v有Dfs ...

  9. jquery-layer弹出框

    样式1: 代码: 前台jsp: $("#add_table").bind("click",function(){ layer.open({ type: 2, t ...

  10. suse的安装命令zypper,类似apt

    例子:添加11.3的官方软件和升级源zypper ar http://download.opensuse.org/distribution/11.3/repo/oss/ mainzypper ar h ...