现阶段开启每一次新的征程，已然离不开“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变量多数是用来做页面渲染时的说明和介绍，像是keyword、简单介绍等等。

先来看<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>

积跬步，聚小流------Bootstrap学习记录(2)的更多相关文章

积跬步，聚小流------Bootstrap学习记录(3)
响应式作为Bootstrap的一大特色.栅格系统可谓是功不可没,既然如此,那我们就来看一下栅格系统是怎样帮助bootstrap实现响应式布局的呢? 1.什么是栅格系统我们能够从Bootstrap的官 ...
积跬步，聚小流------Bootstrap学习记录(1)
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...
积跬步，聚小流-------js实现placeholder的效果
前几天在"技术问答"上问了问题,然后有回复一句话就给概括了:placeholder的效果,不得不说.了解的多了才干说起来言简意赅,用最简单的语言描写叙述最清晰的表达. 可是plac ...
积跬步，聚小流------关于UML类图
UML的存在类图是使用频率比較高的UML图,它用于描写叙述系统中所含的类以及它们之间的相互关系,帮助人们简化对系统的理解,也是系统分析和设计阶段的重要产物,也是系统编码和測试的重要类型根据. UML ...
积跬步，聚小流------ps有用小技巧，改变png图标颜色
* 实现效果: 原图: 改动后: * 实现目的: 满足为实现不同界面色彩搭配改动png图标的颜色 * 实现方法: 1.打开Photoshop工具,导入须要进行改动的png图标: 2.对导入的图 ...
积跬步，聚小流------界面经常使用的jeecms标签
* JEECMS初印象第一次接触JEECMS,突然脑海就浮现了一句话"20元建站,立等可取",原来这都是真的... * JEECMS的界面经常使用标签临时忽略掉环境搭建.栏目配 ...
积跬步，聚小流------java信息生成图片
需求: 是在做证书的时候碰到的这个问题. 当时需求是能够进行在线打印证书,第一次进行的操作是直接打印html,并且已经排好版(用jqprint插件)进行打印.在打印时碰到了兼容的问题,另外因为背景图片 ...
积跬步，聚小流------java获取图片的尺寸
在一篇文章中获取到通过例如以下两种方式进行获取: 1.使用ImageReader进行获取: 2.使用BufferedImage进行获取: 而且经过验证ImageReader进行操作的耗时远远低于Buf ...
qingshow “不积跬步无以至千里，不积小流无以成江海”。--荀子《劝学篇》用tomcat+花生壳搭建自己的web服务器+域名（参考）
链接地址:http://www.blogjava.net/qingshow/archive/2010/01/17/309846.html 用tomcat搭建web服务器目标:免费拥有自己的网站及域名 ...

随机推荐

json转换方法
import java.lang.reflect.Field; import java.util.ArrayList; import java.util.HashMap; import java.ut ...
PHP中使用DOM读取解析XML属性值一例
先看XML文件结构,与常见的文件略有不同,数据并不是用闭合标签保存的,而是直接保存在属性值中. <?xml version="1.0" encoding="utf- ...
[洛谷P2183]巧克力
题目大意:有n块巧克力,每块巧克力有一个大小.巧克力可以切成若干份.现在要你切成大小相等的m块,且尽可能大.求这个大小. 解题思路:我们二分巧克力切成的大小,然后计算能切成多少块,判断即可.由于最大的 ...
Linux 程序包管理-RPM
程序简介: POSIX(Portable Openratin System)跨平台系统:不同操作系统平台的标准C库(glibc)都是遵循POSIX规范的,这样基于标准库开发程序的源代码可以夸平台编译 ...
紫书例题 11-6 UVa 658 （状态压缩+隐式图搜索+最短路）
这道题用到了很多知识点, 是一道好题目. 第一用了状态压缩, 因为这里最多只有20位, 所以可以用二进制来储存状态 (要对数据范围敏感), 然后涉及到了一些位运算. 第二这里是隐式 ...
docker 下修改 mysql sql_mode和配置文件
原文:docker 下修改 mysql sql_mode和配置文件打开PowerShell 首先创建mysql容器,这里我们指定使用mysql5.7的版本 docker run -d -p 3306 ...
STM32是如何进入中断服务函数xxx_IRQHandler的
今天在看stm32的中断,一时间不理解stm32主函数是如何进入中断函数的,按C编程的理解,会有个特定的入口之类的,但是看demo过程中没有发现入口. 以串口中断服务函数void USART1_IRQ ...
CI框架源代码阅读笔记2 一切的入口 index.php
上一节(CI框架源代码阅读笔记1 - 环境准备.基本术语和框架流程)中,我们提到了CI框架的基本流程.这里再次贴出流程图.以备參考: 作为CI框架的入口文件.源代码阅读,自然由此開始. 在源代码阅读的 ...
[JAVA · 0基础]：3.转义字符
定义全部的ASCII码都能够用"\"加数字(通常是8进制数字)来表示.而C中定义了一些字母前加"\"来表示常见的那些不能显示的ASCII字符,如\0,\t,\ ...
84.Node.js -Mongoose 方法
转自:https://www.cnblogs.com/chris-oil/p/9136534.html Mongoose 参考手册标签(空格分隔): MongoDB Mongoose 是什么? 一般 ...

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