1 Bootstrap 4起步
1.1 Bootstrap４ 介绍
Bootstrap是stwitter公司的两名前端设计师设计的， 全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap 是一个用于 HTML、CSS 和 JS 开发的开源工具包。利用 Bootstrap 提供的 Sass 变量和混合（mixins）、响应式栅格系统、可扩展的预制组件以及强大的 jQuery 插件，能够让你快速地开发出产品原型或构建整个 app。
Bootstrap是用在网页上面的用户界面和交互的架构，架构的意思就是把经常用的一些东西呢？事先的为你编写好，需要的时候呢，可以直接去调用，比如说你想去设计页面的布局，你需要的去计算网页的宽度，然后呢，手工能把布局要用到的CSS的代码写出来，Bootstrap架构内置了一套网格布局的系统，你只需要在元素中使用设计好的布局相关的网格的类，不需要你再去手工地撰写布局使用的CSS代码了，再比如说你想在网页中出现一个按钮，通常要先用图形设计软件去设计一个这样的按钮，然后再把用HTML和 CCS表示出来，那么在网页中使用Bootstrap架构的话，我们可以直接为元素去添加Bootstrap设计好的按钮相关的类，这样就可以立即在网页中出现一个漂亮的按钮，Bootstrap还允许我们去控制这个按钮的颜色、样式、大小等等，Bootstrap还包含了很多在网页中经常用的一些界面设计的表格、表单，导航栏、按钮组、分页器，导航路径等等，Bootstrap还提供了很多交互的小插件，比如说对话框，下拉菜单，工具提示，选项卡等等，这些你都可以直接去使用，你只需要按照Bootstrap设计好的方式，先把代码的结构写出来，然后在元素上面使用相应的类，剩下的事Bootstrap全部都会为你做好，这就是我们的工作变得非常的简单。
1.2 Bootstrap４ 的构成
Bootstrap涵盖了以下几个方面：
（1）基本结构：Bootstrap提供了不念旧恶带有网格系统、链接样式、背景的基本栅栏结构。
（2）CSS：含有一个优秀的栅格布局和全局CSS样式。
（3）组件：Bootstrap包含了丰富的组件库，里在涵盖了WEB开发中常见的几十种组件。
（4）JavaScript插件：Bootstrap包含了十几个自定义的JavaScript插件。
（5）定制：可以进行组件和变量的定制升级，从而得到自己想要的版本，这样可以及大地提高开发的灵活性。
1.3 Bootstrap4的下载
1、下载Bootstrap4
下载地址：https://v4.bootcss.com/docs/getting-started/download/
如果您使用的是未编译的源代码，您需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件，Bootstrap 官方只支持 Recess，这是 Twitter 的基于 less.js 的 CSS 提示。
为了更好的了解和更方便的使用，我们将在本教程中使用 Bootstrap 的预编译版本。
下载解压后有以下文件夹：
CSS文件夹里面放的就是Bootstrap架构的最重要的部分，就是Bootstrap架构事先设计好的样式，里面有两类文件，CSS文件和MAP文件，什么是MAP文件，请同学们百度一下，简单来说map文件是某些浏览器的开发人员工具。
CSS文件有bootstrap、bootstrap-grid、bootstrap-reboot（其中.min.css是去掉注释文字和多余空白的，压缩后的.css文件）。对于这三种css文件的作用，我们看一下官网的解释：
可以看出，bootstrap.css支持所有的功能，其他的css只支持四个功能的一部分。所以在开发中，除特殊情况，我们基本都引用bootstrap.min.css。
JS文件夹里面包含的是bootstrap架构所有包含的javascript的插件，里面有bootstrap、bootstrap.bundle。
从官方解释可以看出bootstrap.bundle包含了popper.js的JS定位引擎库，而bootstrap没有包含popper.js库，而如果你想在网页中使用bootstrap架构里面提供的下拉菜单、选项卡这些交互功能，我们只需使用bootstrap.min.js。
2、下载jQuery文件
如果没有jQuery文件的话，就无法使用有些插件，必须有jQuery文件支持。
下载地址：https://jquery.com/
下载jQuery文件，如果没有jQuery文件的话，就无法使用有些插件，必须有jQuery文件支持。
3、引入环境的方法：
文档必须是HTML5
（1）使用外部的bootstrap环境的方法
这种方法必须联网
引入CSS文件：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
引入JS文件：
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
（2）引入内部bootstrap环境
1.4 BootStrap的基本模板
1、外部的bootstrap环境的的基本模板
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--
指明开发的是响应式页面，及不同设备时网页的绽放比例，屏幕和设备的屏幕一致，初始缩放为1:1，禁止用户缩放
-->
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
2、内部的bootstrap环境的的基本模板
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 引入外部的Bootstrap中的CSS文件 -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- jQuery文件，务必在bootstrap.min.js之前引入 -->
<link rel="stylesheet" type="text/css" href="js/jquery-3.4.1.slim.min.js">
<!-- 再引入Bootstrap.min.js文件 -->
<link rel="stylesheet" type="text/css" href="js/bootstrap.min.js">
</head>
<body>
</body>
</html>
