积跬步，聚小流------Bootstrap学习记录(2)

最新推荐文章于 2015-08-11 15:19:23 发布

麦田里的少年

最新推荐文章于 2015-08-11 15:19:23 发布

阅读量1.2k

点赞数 1

分类专栏：工作前三年 - 前端基础文章标签： bootstrap 前端学习记录

本文链接：https://blog.csdn.net/marsmile_tbo/article/details/47397423

版权

工作前三年 - 前端基础专栏收录该内容

95 篇文章 3 订阅

订阅专栏

现阶段开启每一次新的征程，已然离不开“Hello World”的习惯仪式，这次自然也不例外。先来看下给出的官网给出的示例：

1、bootstrap官网提供的html基本模板代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello World！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

2、html基本模板代码解读

* html5的必备元素

先来看这段代码，当然是必不可少的html5的必备元素：

<!DOCTYPE html>、<html>、<head>、<title>、<body>

* 相应的meta标签设定

除此之外，我们看到了3个<meta>标签/1个样式链接/4个脚本链接

首先，<meta>标签通常分为两类：HTTP-EQUIV变量和NAME变量，通常我的理解是HTTP-EQUIV变量多数是用来对网页的设定，比如缓存，定点刷新等等，而NAME变量多数是用来做页面渲染时的说明和介绍，像是关键字、简介等等。

先来看<meta charset="utf-8">，我想这个是最简单的，设定以什么语言来解读，通常大家都会用到，而它写全了应该是<meta http-equiv="Content-Type" content="text/html; charset=utf-8">,这个就不再多说了

再来看<meta http-equiv="X-UA-Compatible" content="IE=edge">，这个是IE8的专用标记，用来指定ie8来模拟某个特定版本的渲染方式，这里IE=edge代表了如果系统安装了ie8以上版本，则用最高版本的IE内核进行渲染，如果没有则无意义，这是因为IE8在刚推出的时候由于重构的问题，无法适应较高级的浏览器，所以用X-UA-Compatible标签来强制用较低版本的ie来渲染，当然可以用指定版本，例如常用的<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">.

另外<meta http-equiv="X-UA-Compatible" content="IE=edge,chorme=1">.则是谷歌做的Google Chrome Frame（谷歌内嵌浏览器框架GCF），这个框架是让用户ie浏览器外表不变，但用户在浏览网页时使用Google Chrome浏览器内核，它是支持IE6/7/8等多个版本IE浏览器的，万恶的IE还得谷歌帮你解决兼容么，而以上标记则就是在安装了GCF之后，用来指定页面使用chrome内核来渲染。

至于<meta name="viewport" content="width=device-width,initial-scale=1">则是用来设定移动端的，通常移动端的分辨率要小于pc端，而且移动端的分辨率并不固定。（见下图）

（此图盗于点击打开链接，也可在此文中查看更详细信息）

我们姑且就记得是用来解决移动端分辨率问题的即可，另外还有maximum-scale、minimum-scale和user-scalable等属性，这一问题通常出现在app中（app端通常是固定样式的，如果像页面一样可以缩放则显的不那么正式），解释如下图

相应的链接样式在这里没有什么可说的，会在后期的学习中不断分解它，学习它。

* 代码中脚本解读

而链接的脚本有4个，其中两个是在之间，那这又是什么意思呢？其实这种条件注释只有在IE之下才能被解读，其它浏览器是将它当做html注释不进行解读，释用来给IE添加特别的指令，从IE5才开始被支持。而这里的[if lt IE 9]我们可以理解为“ie浏览器版本如果小于(less than)IE9”，满足这种条件才被解读。

那在这种满足这种条件的情况下执行的这两个脚本又是用来做什么的呢？

首先html5shiv.js是用来让IE浏览器来支持html5元素的；然后respond.js则是用来让IE浏览器和其它不支持css3的浏览器提供媒体查询的min-width和max-width，从而来实现网页的响应式设计。

但是这里需要注意的是，这两个脚本必须加载在head中，在结构加载前解释，否则就没有意义了。

至于剩下的两个脚本，我们需要注意的则是jquery的js必须加载在bootstrap的js加载之前，当然这个是我们已经习以为常的问题了，另外js加载在body之后，可以让页面加载的更为迅速，渲染更快。

（我们可以用ie打开相应的链接，然后直接保存该js，

这里提供下链接：html5shiv.js的https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js;

respond.js的https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js；）

3、基本版bootstrap模板

这样我们就把基本模板的所有代码都弄明白了，删掉一些不必要的注释，我们就可以得到一个最精简的hello world了。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello World！</h1>
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>