一、概述
①当下最流行的前端UI框架（有预制界面组件），组件简洁大方，代码规范精简，界面自定义性强，可以有效提高web开发效率
②有自己的生态圈，不断的更新迭代。提供了一套简洁、直观、强悍的组件。标准化的html+css编码规范。让开发更简单，提高了开发的效率。
③虽然界面组件样式已经定义好了，但是扩展性相对较强，也就是说我们还可以自定义，修改默认样式
二、版本
①2.x.x 停止维护，兼容性好，但是代码不够简洁，功能不够完善。
②3.x.x 目前使用最多，稳定，但是放弃了IE6-IE7，对IE8支持但是界面效果不好，偏向用于开发响应式布局、移动设备优先的 WEB 项目。
③4.x.x 测试阶段，更偏响应式，移动设备。
三、文档
①英文文档：https://getbootstrap.com/docs/4.1/getting-started/introduction/
②中文文档：bootstrap中文网 、菜鸟教程 、css88
四、基本模板
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!--要求当前网页使用浏览器最高版本的内核来渲染--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放--> <meta name="viewport" content="width=device-width, initial-scale=1，user-scalable=0"> <!-- 优先加载和浏览器解析：上述3个meta标签*必须*放在最前面，任何其他内容都必须跟随其后！ --> <title>Bootstrap基本模板</title> <!-- 引入Bootstrap css文件 ：Bootstrap 核心样式--> <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet"> <!-- 引入HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="lib/html5shiv/html5shiv.js"></script> <script src="lib/respond/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好，世界！</h1> <!-- 引入jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="lib/jquery/jquery.js"></script> <!-- 引入 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="lib/bootstrap/js/bootstrap.js"></script> </body> </html>
五、normalize.css
①bootstrap为了增强跨浏览器表现的一致性，我们使用了Normalize（是一个css样式重置库）
②normalize.css和自己写的reset.css的异同：
- 都是重置样式库，都是为了增强浏览器的表现一致性
- 但是normalize不会重置已经一致的元素
- 比如：ul，reset.css 因为需求会设置list-style:none ，但是normalize.css 不会重置ul样式 ，因为本身已经在每个浏览器表现一致的元素
六、布局容器
①响应式容器：固定宽度
<div class="container"> ... </div>
②流式布局容器：全屏幕宽度的容器使用， 填满你视口的整个宽度
<div class="container-fluid"> ... </div>
③对比两种容器
<div class="container">响应式布局容器</div> <div class="container-fluid">流式布局容器</div>
.container{ height: 100px; background: red; } .container-fluid{ height: 100px; background: pink; }
