简介
Bootstrap是一个用于快速开发Web应用程序和网站的前端框架
是基于HTML，CSS，JavaScript的
为什么要使用Bootstrap？
1. 移动设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式
2. 浏览器支持：所有主流浏览器都支持
3. 容易上手
4. 响应式设计：其响应式CSS能够自适应于台式机，平板电脑和手机
5. 为开发人员创建接口提供了一个简洁统一的解决方案
6. 包含了功能强大的内置组件，易于定制
7. 提供了基于web的定制
8. 是开源的
Bootstrap包的内容：
基本结构：提供了一个带网格系统，链接样式，背景的基本结构
CSS：全局的CSS设置，定义基本的HTML元素样式，可扩展的class，以及一个先进的网格系统
组件：包含了几十个重要的组件
JavaScript：包含了十几个自定义的JQuery插件
定制：可定制Bootstrap组件，less变量和JQuery插件来得到你的版本
bootstrap3.0文档：https://v3.bootcss.com/
bootstrap4.0文档：https://v4.bootcss.com/
Bootstrap的开发工具
任意前端开发工具即可
专门针对Bootstrap的开发工具：Jetstrap（https://jetstrap.com/）
LayoutIt（https://www.bootcss.com/p/layoutit/）
bootswatchr（http://bootswatchr.com/）
Bootstrap的使用
1. 下载压缩包：编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件
2. CDN引入：（要先引入jquery）
Bootstrap3和Bootstrap4的区别
Bootstrap3：
使用less语言编写
使用float的布局方式
使用px为单位
共有4种栅格类，依次是特小(col-xs-)、小(col-sm-)、中(col-md-)、大(col-lg-)
使用push和pull向左和向右移动
Bootstrap4：
使用sass语言编写
使用flex的布局方式
全部使用了rem和em为单位（除了部分的margin和padding使用px）
共有5种栅格类，依次是特小(col-)、小(col-sm-)、中(col-md-)、大(col-lg-)、特大(col-xl-)
偏移列通过 offset- 类来设置，例如：.offset-md-4 是把.col-md-4 往右移了四列格。
Bootstrap---全局样式
特点：代码整洁，风格统一，美观易用
基本的HTML元素均可以通过class设置样式并得到增强效果
一些全局类名和标签：
关于标题：
标题：h1-h6 / .h1-.h6
副标题：small
关于文本：
对齐：.text-left / .text-center / .text-right
大小写：.text-lowercase / .text-uppercase / .text-capitalize（首字母大写）
文本颜色：text-muted/primary/success/info/warning/...
...
关于表格：
带边框：.table-bordered
条纹状：.table-striped
悬停变色：.table-hover
紧凑风格：.table-condensed
通过一些状态类可以为行或单元格设置颜色：
.active：鼠标悬停在行或单元格上时所设置的颜色
.success：标识成功或积极的动作
.info：标识普通的提示信息或动作
.warning：标识警告或需要用户注意
.danger：标识危险或潜在的带来负面影响的动作
...
关于表单：
.form-control：表单元素被默认设置宽度属性为width: 100%
.form-group：将label元素和前面提到的控件包裹在这个类中可以获得最好的排列
.form-inline：可使其内容左对齐并且表现为inline-block级别的控件（只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠））
按钮颜色：.btn-default / .btn-success / .btn-primary / .btn-info / .btn-warning / .btn-danger / .btn-link ...
按钮大小：.btn-lg / .btn-sm
...
关于图片：
.img-responsive：让图片支持响应式布局（设置了max-width:100%; height:auto; display:block属性）
.center-block：让设置了.img-responsive类的图片水平居中
.img-rounded：设置圆角
.img-circle：设置为圆形
.img-thumbnail：设置带有边框的圆角图形
...
关于浮动：
.pull-left：左浮动
.pull-right：右浮动
.clearfix：清除浮动（在父元素上加）
关于显示和隐藏：
.show：显示
.hidden：隐藏
Bootstrap---meta标签中的viewport
属性：width，height，user-scalable（是否允许缩放），initial-scale（网页初始化时的大小），maxmum-scale（允许用户缩放到的最大比例），minimun-scale（允许用户缩放到的最小比例）
Bootstrap---栅格系统
随着屏幕或视口尺寸的增加，系统会自动分为最多12列
栅格参数：
bootstrap4有5种栅格布局：
bootstrap3有4种栅格布局：
.col-lg-x：在大屏中占的x/12
.col-md-x：在中屏中占的x/12
.col-lg-x：在小屏中占的x/12
.col-xs-x：在超小屏中占的x/12
栅格布局的容器：.container和.container-fluid
.container类用于固定宽度并支持响应式布局的容器，容器可以被嵌套，但是大多数布局并不需要这么做（最少层次的嵌套构建出的网页更优雅-译者注）
.container-fluid 类，可以使div宽度扩展到整个宽度（如果没有被其它CSS容器包含，则应是浏览器运行时的宽度，否则应是父容器中允许的最大宽度，一般视为100%宽度）。
自动布局列：
等宽：
col1
col2
等宽多行：（插入.w-100要将列拆分为新行。.w100似乎与.clearfix有时可以达到同样的网页效果）
col
col
col
col
设置一列宽度：
可变宽度内容：（使用col-{breakpoint}-auto类可根据其内容的自然宽度来调整列的大小）
Bootstrap---响应式设计
针对浏览设备优化页面中既有内容的一种方法
为了适用不同的屏幕宽度，使用CSS的媒体查询（media query）来检测浏览器视口的宽度
不同的屏幕使用不同的样式表，不同的设备使用不同的断点
设置断点根据情况生效对应的css属性：
@media (only) screen(/print/speech/...) and (max-width:xxx) and (min-width:xxx){...}
（only是为了在不支持媒体查询的浏览器中隐藏样式表，浏览器处理以only开头的关键词时将会忽略only）
对不同设备的显示和隐藏：
Bootstrap---字体图标
特点：体积小便于加载，无需重复设计，方便引用
对应的类指定对应的图标
Bootstrap---组件怪异属性
1. role：用于表示一个普通的标签，使之语义化，方便浏览器对其具体功能进行识别
如：，也即是将div元素转换为button按钮功能进行使用
2. aria-label：设置的值能让读屏软件给读出来（当我们没有给输入框设置 label 时，当其获得焦点时，屏幕阅读器会读出 aria-label 属性的值，aria-label 不会在视觉上呈现效果。aria-label 只有加在可被 tab 到的元素上，读屏才会读出其中的内容）
如：
3. tabIndex：设置键盘的tab键在控件中进行移动（焦点的移动顺序）
4. data-：可以此为前缀来添加一些自定义的属性内容（用于存储页面或应用程序的私有自定义数据。不应该包含任何大写字母）
...
Bootstrap---组件下拉菜单
.dropdown：控制组件为下拉
.dropdown-toggle：标明了这个是下拉列表
.dropdown-menu-right：右对齐（代替了.pull-right）
divider：分割线
下拉菜单的事件：data-toggle="dropdown/collpase"
...
Bootstrap---组件控件组
.input-group：表示控件组
.input-group-addon：可放置额外内容及图标
...
Bootstrap---组件按钮组
.btn-group：表示按钮组（加上父元素上）
.btn-default/success/...：设置按钮对应样式颜色
...
Bootstrap---组件导航
以一个带有class为.nav的无序列表开始
.nav-tabs代表可切换的导航
.nav-pills代表胶囊导航
.nav-justified使导航垂直（两端对齐）
...
Bootstrap---组件分页
.pagination：在父元素中添加表示分页
.pager：放置在翻页区域
.previous：把链接向左对齐
.next：把链接向右对齐
...
Bootstrap---组件进度条
.progress：表示进度条外框
.progress-bar：进度条滑板移动的部分
可通过一些状态类改变进度条颜色
.progress-bar-striped：使进度条颜色渐变
...
Bootstrap---组件列表
.list-group：列表组
.list-group-item：列表项
.list-group-item-heading：列表标题
.list-group-item-text：列表文本
.badge：状态数（徽章）
...
Bootstrap---组件面板
.panel：面板外框
.panel-heading：面板头
.panel-body：面板内容
.panel-footer：面板的注脚
...
Bootstrap---组件巨幕
.jumbortron：表示巨幕（添加在父元素上）
如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角，请把此组件放在所有.container元素的外面，并在组件内部添加一个.container元素
...
...
Bootstrap---组件媒体对象
.media：表示一个媒体对象
.media-left：在一个内容块的左侧
.media-body：是媒体对象中的主体内容（常常是图片侧边的内容）
.media-right：在一个内容块的右侧（常放在.media-body的后面）
.media-heading：媒体对象的标题
.media-object：媒体对象中的对象，常常是图片
...
Bootstrap---组件well
把.well用在元素上，就能有嵌入（inset）的简单效果
...（大的效果）
...（小的效果）
...（正常效果）
...
Bootstrap---响应式的嵌入
类.embed-responsive-item直接应用在
