Bootstrap4使用教程

本篇文章写给那些第一次接触Bootstrap框架的学习者，这篇文章将从最基础最基础的Bootstrap下载开始。对Bootstrap有使用经验的同学可以忽略本篇文章。

Bootstrap下载

第一种方法：到bootstrap官网下载http://getbootstrap.com/
第二种方法：bootstrap中文网下载http://www.bootcss.com/
其实这两个方法都是差不多的，方法不重要，只要我们能够下载到我们需要的bootstrap文件就行了。截至到目前bootstrap的最新版本为bootstrap4.1.3，我们这里下载的是4.0版本。这里需要注意的是我们需要下载的是编译版并不是源码，所以下载的时候不要搞错了哦。
下载之后我们把安装包解压，我们会看到很多文件，其实我们用到的只有里面3个，分别是bootstrap.min.css，bootstrap.min.js，bootstrap.bundle.min.js文件

Bootstrap4使用

bootstrap4.0下载之后，我们先来看一下怎么使用它。
为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，我们需要在网页的 head 之中添加 viewport meta 标签。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。
shrink-to-fit=no 自动适应手机屏幕的宽度。
下面我们还要再引入4个文件， bootstrap.min.css（Bootstrap4 核心 CSS 文件）、jquery.min.js（jQuery文件，必须在bootstrap.min.js 之前引入）popper.min.js（于弹窗、提示、下拉菜单等）、bootstrap.min.js（bootstrap的核心js文件）。

<!doctype html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="css/bootstrap.min.css"><title>Bootstrap4使用</title></head><body><h1>Bootstrap4使用</h1><script src="js/jquery-3.3.1.min.js"></script><script src="js/popper.min.js"></script><script src="js/bootstrap.min.js"></script></body>
</html>

可能会有同学会问，popper.min.js文件怎么找不到，其实这个和jQuery一样需要我们自行下载的，如果你的项目中没有用到弹窗、提示、下拉菜单等效果的话，不引入这个文件也是没有任何问题的。或者说你直接把bootstrap.min.js文件替换成bootstrap.bundle.min.js文件页可以，后者里面相当于集合了popper.min.js文件。
还有js文件的引入最好放到body结束标签前，不要放在head标签里，至于原因我们后续再说。
如果你不想下载bootstrap的话，你也可以通过CDN来引入bootstrap的必须文件来直接开发。
下方是官网给出的CDN引入地址。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

至于其中的integrity和crossorigin你只需要和CDN引入的安全性有关就行了。