bootstrap 讲解（中）

　　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>