bootstrap的引用和最简单的使用
bootstrap有在线引用和下载下来使用两种方式。
在线使用可在<head></head>标签之间引入bootstrap的css文件，在body最底层bootstrap的js文件，引入引入方式如下：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> //bootstrap的css文件引用
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> //引入bootstrap的jquery
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> //引入bootstrap的js文件
具体如下：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>bootstrap练习</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> //bootstrap的css文件引用
</head>
另外bootstrap还有js文件，在body中进行引用，引用js时，要将jquery引入文件放在上面例：
<body>
<div class="container">//bootstrap最简单的引用，先建一个div名为container，在container里有很多的row，每个row里再有很多个div，这些div命名为class="col-sm-6 col-md-4 col-lg-3"这种形式，让屏幕最大时，一行显示4个，中屏时，一行显示3个，小屏时一行显示2个。
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> //引入bootstrap的jquery
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> //引入bootstrap的js文件
</body>
bootstrap还可以下载下来在本地引用，本地引用方式如下：
在bootstrap官网中有“用于生产环境的bootstrap”，也有“bootstrap源码”，一般将“用于生产环境的bootstrap”下载下来即可，下载下来的文件如图：
在bootstrap-3.3.7-dist里有css、fonts、js三个文件夹
在css文件件下有bootstrap.min.css
在js文件夹下有bootstrap.min.js
如果js文件里没有jquery.min.js的话，可以下载源码，在源码文件夹里找到jquery.min.js，然后将jquery.min.js拷贝到自己的js文件夹下即可。在bootstrap-3.3.7下的js文件夹下有tests文件夹，下面还有vendor文件夹，在vendor文件夹下可以看到一个jquery.min.js的文件，将这个文件复制到自己的js文件夹中即可。
文件都准备好后，可以进行引用了。如下图：
在引用时，如果是下面这种层级关系：
在index.html中引入就可以是：
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
如果是下面这种层级关系：
在app里有个html文件的话，则引入需要加上../了
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
具体引入路径不固定，不过如果自己下载的文件里没有jquery.min.js文件的话，可以从源码里找到，复制一份到自己的文件夹，引入路径记得不要出错，不然出不来效果的，特别是../这种不要忘记加了
