Metronic学习之路

简介

1.Metronic 是一个基于 Bootstrap 3.* 设计的自适应、多用途的管理后台模板。

2.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]-->

head部分

3.head 部分包含了 meta，css，和懒加载的 js和 css 文件。

4.谷歌字体的 css 链接。

<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet"type="text/css" />

这句链接到谷歌字体，可惜谷歌被墙了，你的网站如果包含了这句，想必半响也打不开。网上有很多关于谷歌字体的处理方式，无非就是下载这个 css 文件和 css 文件中对应的字体文件。

5.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 及其它框架
  • 支持桌面应用
  • 可适配于屏幕阅读器。

最新版可以到 http://fontawesome.dashgame.com/ 下载。

6.simple-line-icons 简单线条图标字体

<link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />

7.bootstrap-switch.min.css 文件

切换 checkboxes 和 radio 按钮的拨动开关。

该组件包括下面这些依赖：jQuery, Bootstrap and Bootstrap Switch CSS + Javascript

官方网站：http://www.bootstrap-switch.org/

8.以上几个 css 文件是 Metronic 模板必须包含的全局 css 部分。

9.全局主题样式

 <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" />

10.主题布局样式

<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" />

11.网页标签图标

<link rel="shortcut icon" href="favicon.ico" />

body的组成结构

12.body 部分包含了 HEADER、CONTAINER、FOOTER，其中 CONTAINER 部分又包含了 SIDEBAR、CONTENT、QUICK SIDEBAR 几个部分

Javascripts 脚本文件

13.看完html结构后我们发现，所有脚本都在 </body> 之前，这主要是因为以下一些原因

  • 为什么放在最后

HTML 文件的加载都是从上往下执行的，我们一般习惯将一些对显示效果影响不大的脚本文件放到页面的最后进行加载。这样可以减少页面的加载时间。

  • 为什么放在 </body> 之前

只所以脚本放在 </body> 之前，而不是之后，主要是因为：基于规则 %html.content "HEAD|BODY"，HTML 标签的子元素只能是 HEAD BODY，如果在 </body> 后再出现 <script> 或任何元素的开始标签，都是 parse error。当然，浏览器一般均有容错机制。错误嵌套的标签、以及位置放置错误的标签都会在paser HTML 过程中尝试修复。修复后得到合法的HTML后在由布局引擎建立相应的DOM对象。在<script>标签放置于</body>标签之后时，源码被所有浏览器【泛指PC上常见的】修复为正常形式，即<script></script></body>。

14.Metronic 用了几十个插件和扩展资源，这才使得这个模板显得尤为强大。具体这些插件的可以在html结构里了解。

时间： 2024-07-30 05:30:20

Metronic学习之路的相关文章

Azure云平台学习之路（三）——Cloud Services

1.什么是云服务? 能够部署高度可用的且可无限缩放的应用程序和API.简而言之,就是你写的CMD程序按照一定的框架进行少量修改就能运行在Azure云平台上. 2.Azure云服务有什么特点? (1)专注应用程序而不是硬件,PaaS的一种. (2)支持多种框架和语言. (3)集成了运行状况监视和负载平衡. (4)自动缩放优化成本和性能 3.建立云服务之前,我们需要建立一个云存储,来记录我们的程序的日志信息(当然,这不是必须的) (1)选择左边导航栏的"存储".主面板上显示的是所有已有的存

linux学习之路之LVM

试想一种情况,当初我们在规划磁盘的时候,只给某一个磁盘或分区之划分了30G的容量,但是后来,随着业务的需求,该磁盘或者分区的使用量会越来越大,等到以后再有数据存放时,发现该磁盘或者分区的容量不够用,此时该怎么办了?可以新增一个磁盘,经过格式化,挂载等过程就可以使用这个磁盘了,再将原来磁盘的数据完全的复制过来.等到后来又发现,规划的磁盘又太大了,然后又使用上述方法来减少磁盘的大小.虽然这种方法可行,但是效率低,比较复杂.不应该是我们首选的方法. 当然,我们可以这样做,将多个磁盘或者分区(PV)组合

我的算法学习之路

关于 严格来说,本文题目应该是我的数据结构和算法学习之路,但这个写法实在太绕口--况且CS中的算法往往暗指数据结构和算法(例如算法导论指的实际上是数据结构和算法导论),所以我认为本文题目是合理的. 这篇文章讲了什么? 我这些年学习数据结构和算法的总结. 一些不错的算法书籍和教程. 算法的重要性. 初学 第一次接触数据结构是在大二下学期的数据结构课程.然而这门课程并没有让我入门--当时自己正忙于倒卖各种MP3和耳机,对于这些课程根本就不屑一顾--反正最后考试划个重点也能过,于是这门整个计算机专业本

一个女大学生的代码学习之路（二）

首先说一下,写这种文章是由于我在四月四日晚上,在手动搭建自己的第一个ssh项目的时候,遇到了一个配置的问题,怎么解决也弄不好,当时是四号晚上九点,我看了一眼表,我就想两个小时之内,我要是能搞定就算行了,但是其实,我搞到三点才OK(凌晨),那时候已经是五号了,转天是一家子去扫墓的时候,结果我居然以这种一个理由没有去,理由是我太累了么?我只是就是搭了一个架子,就是由于我的包太混乱了,导致不兼容,所以tomcat总也不启动,你可能认为好笑,这么简单一个问题怎么就费这多多时间呢,但是作为一个刚接触三框架

kafka学习之路（二）——提高

kafka学习之路(二)--提高 消息发送流程 因为Kafka内在就是分布式的,一个Kafka集群通常包括多个代理.为了均衡负载,将话题分成多个分区,每个代理存储一或多个分区.多个生产者和消费者能够同时生产和获取消息.     过程: 1.Producer根据指定的partition方法(round-robin.hash等),将消息发布到指定topic的partition里面 2.kafka集群接收到Producer发过来的消息后,将其持久化到硬盘,并保留消息指定时长(可配置),而不关注消息是否

Android开发学习之路--网络编程之xml、json

一般网络数据通过http来get,post,那么其中的数据不可能杂乱无章,比如我要post一段数据,肯定是要有一定的格式,协议的.常用的就是xml和json了.在此先要搭建个简单的服务器吧,首先呢下载xampp,然后安装之类的就不再多讲了,参考http://cnbin.github.io/blog/2015/06/05/mac-an-zhuang-he-shi-yong-xampp/.安装好后,启动xampp,之后在浏览器输入localhost或者127.0.0.1就可以看到如下所示了: 这个就

Qt学习之路

  Qt学习之路_14(简易音乐播放器) Qt学习之路_13(简易俄罗斯方块) Qt学习之路_12(简易数据管理系统) Qt学习之路_11(简易多文档编辑器) Qt学习之路_10(Qt中statusBar,MessageBox和Timer的简单处理) Qt学习之路_9(Qt中Item Widget初步探索) Qt学习之路_8(Qt中与文件目录相关操作) Qt学习之路_7(线性布局和网格布局初步探索) Qt学习之路_6(Qt局域网聊天软件) Qt学习之路_5(Qt TCP的初步使用) Qt学习之路

Java学习之路（二）--Thinking in Java

针对昨天Java学习之路(一)--Thinking in Java中的类的静态方法不能访问创建非静态类,给出了将内部类修改成为static静态类,操作方便简单.现在给出第二种不需要添加删除的另一种极为高效的方式.可以将内部类从你所创建的类中复制粘贴到类外,作为一个外部类,在static主方法中就可以创建类的引用了. 源代码如下: ? class test{ int s; char c; } public class test1 { public static class test{ int s;

Linux常用命令学习之路（每天都会更新）

Linux学习之路 1:显示日期时间的命令:date date->可以显示出星期月日时分秒年 date +%Y/%m/%d->可以显示出:年/月/日(date后面必须有至少一个空格) date +%H:%M:%S->显示出:时:分:秒(date后面必须有至少一个空格) date +%h->显示:月(英文的) 2:显示日历命令:cal: cal ->显示当月的日历 cal 2009->显示整个2009的日历 cal 10 2009->显示2009年10月的日历 3: