bootstrap：常用于后台开发，如学生管理系统，虽然稍显笨重，但也是一个开发的利器
推荐下载 3.3.7 版本 也可下载最新版4.3.1 （最新版在手机端不起效果）
且依赖 jQuery 的封装库，也就是说，想使用 bootstrap 的框架，必须引用 jQuery 的封装库
bootstrap 带有样式的标签：
h1-h6 small strong em
h1-h6 标题
small 副标题
strong 加粗
em 倾斜
abbr 用于缩写，鼠标悬浮上方，会把完整的内容展示出来，title="完整的内容"
address 语义化标签，地址标签
bootstrap 类 带有的效果：
class="text-left" 文本对齐方式：左对齐
class="text-center" 文本居中
class="text-right" 右对齐
列表：
ol 无序列表
去项目符号：class="list-unstyled"（去除无序列表上面的点 跟 list-style:none 一样）
需要 li 横向排列：class="list-inline"
dl 自定义列表
<dl> // 如果想让 dt 与 dl 为一行，添加 class="horizontal"（但 dd 还是块级排列）
<dt>标题</dt>
<dd>自定义内容</dd>
</dl>
bootstrap 为文本布局提供了很多排版、类
表格：table
<div> //想让表格成为响应式的表格 需要在 table 外 包一层 div，class="table-responsive"
<table> //想让使表格具有 bootstrap 的效果 需 class="table"； 斑马的效果 class="table-striped"；边框的效果 class="borderd" ；悬浮高亮 class="table-hover"； 变得紧凑 class="table-condensed"
<thead>
<tr>
<th>编号</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>哈哈</td>
</tr>
</tbody>
</table>
</div>
表单：
bootstrap 提供了三种表单布局，垂直（默认），内敛，水平
<form> // class="form-inline" 每一组的元素内敛 class="form-horizontal" 每一组的元素占满一行 有 role="form" 处理表单的类
<div> //为了拥有更好的每组元素的排列 class="form-group"
<label for="ha"> for 的属性值 一定要与 input id 的属性值一致
<div>
<input type="text" id="ha">
</div>
</div>
</form>
按钮：bootstrap 提供的按钮有三种
button input a（推荐 a）
按钮提供的类 btn btn-default：默认按钮 btn-block：独占一行 active：激活 disabled：禁用
bootstrap 提供的图片样式：
img-rounded：6px 的边框圆角
img-circle：变圆
img-thunbnail：空心方块
img-responsive：响应式，用的最多
组件：
字体组件 将 font 文件放到项目中
注意： @font-face 的路径问题 用内敛标签 class="矢量图标的类"
下拉菜单
案例：
<div> // 下拉的菜单 class=dropdown
<button>按钮</button> //绑定的按钮 class="btn" data-toggle="dropdown"
<ul> // 要显示的菜单 class="dropdown-menu"
<li>111</li>
<li>222</li>
</ul>
</div>
按钮组件：专门处理多个按钮的组件
<div> // class="btn-toolbar" role="btn-toolbar" 如果按钮有多个分组，通过外层的 div 来进行管理 不失为一个好的办法
<div> // class="btn-group" 按钮组 多个按钮成为一行，紧紧挨在一起， class="btn-group-vertical" 多个按钮成为一列，紧紧挨在一起，class="btn-group-lg" 按钮变大
<button>按钮1</button> // class="btn btn-default"
<button>按钮2</button> // class="btn btn-default"
</div>
</div>