1.关于Bootstrap4

Bootstrap中文站

Bootstrap的GitHub

Bootstrap开始是Twitter的，然后开源了。
v3.4.1是个非常经典的版本，还有很多地方在用。
现在用v4.3版本学习。（但是看中文站上是v4.4(v4.3.x) ）
最大的特点：响应式，自动适应手机端或PC端
另外的一些框架都是他后代，比如LayUI,ExtJS等等

2.浏览器与设备兼容

1.支持浏览器

浏览器与设备

几乎支持所有版本的浏览器:

"browserslist": [
  "last 1 major version",
  ">= 1%",
  "Chrome >= 45",
  "Firefox >= 38",
  "Edge >= 12",
  "Explorer >= 10",
  "iOS >= 9",
  "Safari >= 9",
  "Android >= 4.4",
  "Opera >= 30"]

2.移动端：

3. 本地与CDN

一般前端框架的依赖都在dist文件夹下
生产阶段min，开发阶段就是不带后缀的
引用CDN：
- 好处：项目体积小，版本自动更新
- 坏处：没网就不行了

4. 文档

文档,入门步骤

5. 具体步骤

新建项目
新建img，lib文件夹。引用的css以及js都放在lib下。
更改H5的头部声明
首先是h5的头部：HTML5标准的 doctype 头部定义是首要的，否则会导致样式失真（中国码农往往直接抄国外站点将lang写成en的小细节也要注意以免贻笑大方)。

1
2
3

<!doctype html><html lang="zh-cn">
...
</html>

meta:vp，响应式标签
meta:vp添加设备自适应的标签

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

一行CSS，3行JS
link引入bootstrap.css
script引入 jQuary.js, popper.js, bootstrap.js

最终，一个最基本的模板

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--样式-->
    <link rel="stylesheet" href="lib/css/bootstrap.css">
    <title>Title</title>
</head>
<body>

<!--js-->
<script src="lib/js/jquery-3.4.1.js"></script>
<script src="lib/js/popper.js"></script>
<script src="lib/js/bootstrap.js"></script>

<h1>hello</h1>

</body>
</html>