Bootstrap官网：Bootstrap中文网 铂特优选
Bootstrap 下载
点击进入中文文档
点击下载
生产文件是开发响应式网页应用，源码是底层逻辑代码，因为是要制作响应式网页，所以下载开发文件
引入 css 文件， bootstrap.css 和 bootstrap.main.css ，前者跟平常书写 css 的样式一样，都是选择器然后样式属性，后者则是给浏览器看的，但是轻量，所以一半就是选择 后者。
要使用哪个就将哪个放到根目录文件夹中
Bootstrap 使用
- 引入 Bootstrap CSS 文件
- 调用类名 ：container 响应式布局版心类型
Bootstrap - 删格系统
在栅格系统中整个网页宽度平分12等份，一行排4个，每个是3份，类名中就加上这个份数
安装插件 IntelliSense for CSS class names in HTM，能提示栅格系统相应的类
Bootstrap - 全局样式 - 按钮
Bootstrap - 全局样式 - 表格类:
table-success加给整个 table则整个表格颜色都是绿色，也可以加给一行，该行就是绿色
Bootstrap 组件 （Components) :
js文件不是必须的，如果网页有动态效果引入即可，没有就不用
直接官网复制粘贴 导航栏 HTML 代码，然后按需进行修改
例如改变背景色，右键检查 找出背景色所在选择器，将 样式写在 link 引入的 bootstrap.main.css之后，因为后边的会覆盖前边样式，并且注意 右键检查时有没有 ！import 将 css 优先级提到最高
（导航栏 - j静态 - 不带 js）
轮播图 - 动态 - 带 js
引入 js 文件
Bootstrap - 字体图标:
下载安装使用
使用字体图标时，先引入字体图标文件，在其字体图标调用时类名前加上 bi -
综合案例 - 首屏
- 新建 less文件，将其导出到 css 文件夹中
- 在 html 中 引入 bootstrap 框架样式，字体图标，js 文件，以及自己的 css 文件，还有字体图标
导航
设计稿中背景色是 透明的：右键查找背景色属性就行层叠修改
固定定位
版心 ：去掉 fluid
导航内容左右对齐：flex-grow : 0;
左边换图，右边换字 （多加了 3 个 a）
轮播图
使用背景图更方便而不是 img，因为 img 需要写宽高，同样其父级盒子也要写宽高，所以直接在 div 盒子中写背景图更方便
- 增加指示器个数与背景图个数一样
图片响应式效果：
因为之前导航栏没有轮播图，字又是白色，如果设置背景颜色为透明的话就看不见了，现在将背景颜色改为透明
开源项目：
- 加 container 类版心居中
- 栅格系统设置响应式布局，给四个盒子加上视口宽度宽度分别大于 992 和 768 时的盒子分布情况的类
- container类是版心居中效果
- row是 flex 布局效果
- 不管视口如何变化，高度不变始终 200,所以设置 高度
- 因为已经给了 一行排列的四个盒子宽度设置是 25%，所以如果要加上右外边距的话，铁定得换行。选中一行排列的四个盒子发现每个盒子设置了内边距，所以在盒子中加上一个 a ,给 a 设置宽度跟父级一样，设置背景色，内边距不会填充子级的背景色，所以视觉上就相当于两个盒子之间有了 margin
- 所以栅格中盒子之间显示的边距不是 margin 而是 padding
接下来就是 javascript了
