bootstrap應用場景

①實現定義好的可複用CSS元件。
②使用者使用的終端裝置不一樣，可以實現accessible。
③解決browers的相容問題。

bootstrap和react的區別

bootstrap只是基於html的UI佈局工具，設計響應式頁面。
react是元件工程化。

安裝與引入

安裝方法

進入路徑，然後用npm install
裝完之後新增.gitignore忽略node_modules

download bootstrap

指令:npm install [email protected] --save
接下來安裝它的同夥：jQuery和Popper.js
npm install [email protected] [email protected] --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>