个人觉得，基础知识掌握之后，后面一些简单模块的实现，可以直接参考官方文档 BootStrap官网
文章目录
一、BootStrap 简述
-
BootStrap，基于 HTML、CSS、JavaScript 的前端框架；
-
该框架已经预先定义好了一套 CSS 样式与相对应的 JS 代码；开发人员只需要编写 HTML 结构，添加 BootStrap 固定的 class 样式，就可以完成指定的效果；
-
作用：
BootStrap 使得 Web 开发更加快捷、高效；
BootStrap 支持响应式开发，解决了移动互联网前端开发问题； -
响应式布局：一个网站的展示能够兼容多个终端，而不需要为每个终端单独做一个展示版本；
二、BootStrap 环境搭建
1. 基本模板创建
2. 基本模板讲解
三、布局容器
- BootStrap 必须需要至少一个布局容器，才能为页面内容进行封装和方便的样式控制，相当于一个画板；
- 任意元素使用了布局容器的样式，都会成为一个布局容器，建议使用 div 作为布局容器；
container：居中，两端有留白；container-fluid：占据了视口100%宽度；
四、栅格系统（网格系统）
1. 简述栅格系统
- 为了方便在布局容器中进行网页的布局操作；
- BootStrap 提供了一套专门用于响应式开发布局的栅格系统；
- 栅格系统将一行分为 12 列，通过设定元素占用的列数来布局元素在页面上展示的位置；
2. 栅格系统入门
（1）栅格特点：
- 基本的书写方式：
容器 --- 行 --- 列；
（HTML 表格：定义表格 --- 行 --- 单元格） - 行：必须包含在
.container或.container-fluid中； - 行 使用的样式
.row，列 使用的样式col-*-*，元素内容应当放置在 列内； - 栅格参数：
col-屏幕尺寸-占用列数 - 列元素的书写顺序，决定了布局顺序，闲书写的列元素会被先布局到行上；
- 列元素的占用列数，定义元素的大小；
3. 栅格系统特点及深入剖析
- 如果列元素 占用列数 总和 <= 12，这些元素还排在同一行；
- 如果列元素 占用列数 总和 > 12，超出的元素会另起一行排列；
- 行和列可以进行无限嵌套，嵌套方式为：行 — 列 — 行 — 列 …
4. 屏幕尺寸设置
如果没有设置当前屏幕尺寸的样式，默认一个元素占一行；
多个屏幕尺寸共同设置
- 如果设置了一个屏幕尺寸，
比这个尺寸大的屏幕，继承了当前的设置；
比这个尺寸小的屏幕，还是默认一个元素占一行； - 例如：设置了 col-md-4，那么也相当于设置了 col-lg-4，
其他屏幕尺寸均默认为 col-sm-12，col-xs-12；
5. 列偏移
- 列偏移：将对应的列元素向右侧进行推移；
- 例：
col-md-offset-4；将元素向右偏移4个列的位置；
五、列表
.list-inline：内联列表；
六、按钮
- 注意：任何 HTML 元素加上以下样式 都会变成按钮；
例子如下：
七、导航条
八、轮播图
- 轮播图 DIV 的定时换图属性：
data-interval="毫秒值"； - 注意：多个轮播图必须修改轮播图的 ID；
修改完轮播图的 ID 之后，要修改 小圆点 以及 左右按钮 的 ID；
九、排版对齐方式
- 以下排版对齐方式，会将元素内所有内容都进行排版设置；
设置元素居中效果：
十、表单元素
- 水平排列的表单样式；
- 校验状态；
