一、什么是Bootstrap？##

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。
Bootstrap 是基于 HTML、CSS、JavaScript的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。

二、Bootstrap的优势：##

Bootstrap简洁灵活，使得 Web 开发更加快捷。其最大的优势是响应式布局，使得开发者可以方便的让网页无论在台式机、平板设备、手机上都获得最佳的体验。

三、Bootstrap的使用方法##

在项目页面中引入
jquery.3.1.1.js
bootstrap.min.js 文件
bootstrap.min.css 文件
2.特别注意：文件的引用顺序，
query.3.1.1.js 要放到最上面，其次再引入另外两个文件
3.在制作HTML页面的时候就可以直接引用了！
四、全局样式
(一)bootstrap全局显示、排版和链接
1、全局显示
Bootstrap 3使用 body {margin: 0;} 来移除 body 的边距。
2、排版
使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。
3、链接样式：
通过属性 @link-color 设置全局链接的颜色。
4.容器container
Bootstrap 3 的 container class 用于包裹页面上的内容。
Bootstrap对排版、代码的增强功能
5.标题： Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式
（1）、内联子标题
<small></small>或者class="small"
（2）、段落
为了给段落添加强调文本，则可以添加 class=“lead”，这将得到更大更粗、行高更高的文本
(二)文本对齐风格以及特殊处理:
1.强调
HTML 的默认强调标签 <small>（设置文本为父文本大小的 85%）、
<strong>（设置文本为更粗的文本）、<em>（设置文本为斜体）。
2.缩写
HTML元素提供了用于缩写的标记，比如 WWW 或 HTTP。
Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，
当鼠标悬停在上面时会显示完整的文本（只要您为 <abbr> title 属性添加了文本）。
为了得到一个更小字体的文本，只要把 .initialism 到 <abbr>就可以了。
3.地址（Address）：
使用 <address> 标签，您可以在网页上显示联系信息。
由于 <address> 默认为 display:block;，您需要使用 �标签来为封闭的地址文本添加换行。
(三) 列表:
Bootstrap 支持有序列表、无序列表和定义列表。
有序列表：有序列表是指以数字或其他有序字符开头的列表。
无序列表：可以使用 class .list-unstyled 来移除样式(开头的数字)。也可以通过使用 class .list-inline 把所有的列表项放在同一行中。
定义列表：可以使用 class dl-horizontal 把 <dl> 行中的属于与描述并排显示。
(五)表格
基本的表格
class="table" 只带有内边距（padding）和水平分割的基本表
2.可选的表格类
（条纹表格）
通过添加 class="table table-striped"，将在 <tbody> 内的行上看到条纹
（边框表格）
通过添加 class="table table-bordered"，将在 <tbody> 内的行上看到边框
（精简表格）
通过添加 class="table table-condensed"，实现精简表格
（上下文类表格）
上下文类允许改变表格行或单个单元格的背景颜色
值：
.active 对某一特定的行或单元格应用悬停颜色
.success 表示一个成功的或积极的动作
.warning 表示一个需要注意的警告
.danger 表示一个危险的或潜在的负面动作
这些类可被应用到 <tr>、<td> 或 <th>。
(六)代码的增强功能
Bootstrap 允许您以两种方式显示代码
第一种是code 标签，内联显示代码
第二种是 pre 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，则应该使用 pre标签。
注意：
使用 pre和 code 标签时，确保开始和结束标签使用了 unicode 变体： < 和 >。
(七)Bootstrap对表单的增强功能
1.表单
表单布局：Bootstrap 提供了下列类型的表单布局：
向父元素<form> 添加 role="form"。把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control"。

2、内联表单
如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，向 <form> 标签添加 class="form-inline"。
3、水平表单
水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：向父元素<form> 添加 class .form-horizontal。把标签和控件放在一个带有 class .form-group 的 <div> 中。向标签添加 class .control-label。
注意：
默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。
在使用内联表单时，需要在表单控件上设置一个宽度。使用 class .sr-only，您可以隐藏内联表单的标签。