Bootstrap 是当下最流行的前端框架（界面工具集）。
Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。格式如下：
<!DOCTYPE html> <html lang="zh-CN"> ... </html>
Bootstrap 的第三方依赖的库：
jQuery：Bootstrap框架中的所有JS组件都依赖于jQuery实现，jQuery作为一个框架来讲，提供一套比较便捷的操作DOM的方式；点击打开链接下载html5shiv：让低版本浏览器可以识别HTML5的新标签，如header、footer、section等；点击打开链接下载
respond：让低版本浏览器可以支持CSS媒体查询功能。点击打开链接下载
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!--设置当前HTML文件的字符编码-->
<meta charset="UTF-8">
<!--compatible兼容的，设置浏览器的兼容模式版本（让IE使用最新的渲染引擎工作）-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--声明当前网页在移动端浏览器展示的相关设置-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap基本的HTML模板</title>
<!--引入Bootstrap核心样式表文件-->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<!--引入html5shiv.min.js让浏览器可以识别HTML5的新标签-->
<!--引入respond.min.js让低版本浏览器可以使用CSS3的媒体查询-->
<!--[if It IE 9]>
<script src="html5shiv/html5shiv.min.js"></script>
<script src="Respond/respond.min.js"></script>
<![endif]-->
<!--自己写的CSS样式文件放head最下面-->
</head>
<body>
<div><h1>Hello!</h1></div>
<!-- Bootstrap的所有JS组件都是依赖jQuery的，所以必须放在前边-->
<script src="jquery/jquery-3.3.1.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。-->
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<!--自己写的js文件放在body最下面-->
</body>
</html>
Compatible 兼容的<meta http-equiv="X-UA-Compatible" content="IE=edge">
此属性为文档兼容模式声明，表示如果在IE浏览器下则使用最新的标准渲染当前文档，模式Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。简单的说，就是什么版本 IE 就用什么版本的标准模式渲染。
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1），也不允许用户手动缩放。
width——viewport的宽度
height——viewport的高度
initial-scale——初始的缩放比例
minimum-scale——允许用户缩放到的最小比例
maximum-scale——允许用户缩放到的最大比例
user-scalable——用户是否可以手动缩放，值可取yes/no,默认yes，表示允许用户缩放，设置为no，表示不允许缩放。视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示。
通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。