#2 bootstrap安装与引入 bootstrap4系列

bootstrap应用场景

①实现定义好的可复用CSS组件。
②用户使用的终端设备不一样，可以实现accessible。
③解决browers的兼容问题。

bootstrap和react的区别

bootstrap只是基于html的UI布局工具，设计响应式页面。
react是组件工程化。

安装与引入

安装方法

进入路径，然后用npm install
装完之后添加.gitignore忽略node_modules

download bootstrap

指令:npm install bootstrap@4.0.0 --save
接下来安装它的同伙：jQuery和Popper.js
npm install jquery@3.3.1 popper.js@1.12.9 --save

查看文件

进入node_modules，有个bootstrap，接着进入dist，进入css文件夹。
这里要用到bootstrap.min.css

用lite-server启动

给json表加东西

"scripts":{
	"start":"npm run lite",
	"test": "echo \ "Error: no test specified\" && exit 1",
	"lite":"lite-server"
}

cmd里使用npm start

给主页加上引用表

CSS部分：

<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<Meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

注意引入bootstrap的js要先引入jquery和popper

<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>