Bootstrap
[if !supportLists]一、 [endif]布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们
提供了两个作此用处的类。注意，由于padding 等属性的原因，这两种容器
类不能互相嵌套。
<div class="container">
...
</div>
.container类用于固定宽度并支持响应式布局的容器；
<div
class="container-fluid">
...
</div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器
[if !supportLists]二、 [endif]栅格网格系统（Grid System）
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕
或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
注意: 网格系统必须使用到 css
container、row 、xs (xsmall
phones), sm (small tablets), md
(middle desktops) lg (larger desktops) 即: 超小屏(自动)，小屏
(750px)，中屏(970px)和大屏(1170px)
数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对
齐方式和内距(padding)。
在行(.row)中可以添加列(.column), 只有列（column）才可以作为行容
器(.row)的直接子元素，但列数之和不能超过平分的总列数，比如 12。如果大于 12,则自动换到下一行。
<div
class="container">
<div
class="row">
<div
class="col-md-4">4 列</div>
<div
class="col-md-8">8 列</div>
</div>
</div>
[if !supportLists]三、 [endif]列组合
列组合简单理解就是更改数字来合并列（原则：列总和数不能超 12，大于
12,则自动换到下一行。），有点类似于表格的 colspan 属性。
<div class="container">
<div class="row">
<div class="col-md-4">4 列</div>
<div class="col-md-8">8 列</div>
</div>
<div class="row">
<div class="col-md-2">2 列</div>
<div class="col-md-10">10 列</div>
</div>
</div>
[if !supportLists]四、 [endif]列偏移、列排序
使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-8”，表示该列向右移动 8 个列的宽度(要保证列与偏移列的总数不超过 12，不然会致列断行|换行显示)。
列排序：通过添加类名”col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。往前 pull，往后 push。
[if !supportLists]五、 [endif]列嵌套
Bootstrap 框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列.
[if !supportLists]六、 [endif]排版
[if !supportLists]1、 [endif]标题
定义标题都是使用标签<h1>到<h6>，只不过Bootstrap覆盖了其默认的样式，使其在浏览器下显示的效果一样。
后面可以紧跟一行小的副标题<small></small>或使用.small
<h1>h1. Bootstrap
heading<small>副标题</small></h1>
<div class="h1">Bootstrap 标题 1<span class="small">副标题</span></div>
[if !supportLists]2、 [endif]段落
段落是排版中一个重要的元素之一，通过.lead来突出强调内容，其作用就是增大文本字号，加粗文本，而且对行高和 margin 也做相应的处理：<small>:小号字
<b><strong>:加粗
<i><em>:斜体。
<p
class="lead"><small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努力</em>的<strong>你</strong></p>
[if !supportLists]3、 [endif]引用
<blockquote>：标签定义摘自另一个源的块引用，
使用.blockquote-reverse，实现右对齐。
<footer>:脚注
<cite>：表示对某个参考文献的引用
案例：
<blockquote
class="blockquote-reverse">
好好学习 Java！
<footer>本文出自大师之手</footer>
<cite>thinking in java</cite>
</blockquote>
[if !supportLists]4、 [endif]强调
定义了一套强调类名，这些强调类都是通过颜色来表示强
调，具本说明如下：
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
[if !supportLists]5、 [endif]文本对齐
为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：.text-left：左对齐 .text-center：居中对齐 .text-right：右对齐 .text-justify：两端对齐。
[if !supportLists]6、 [endif]列表
在 HTML 文档中，列表结构主要有三种：
无序列表(<ul><li>…</li></ul>)、
有序列表(<ol><li>…</li></ol>)、
定义列表(<dl><dt>…</dt><dd>…</dd></dl>)。
bootstrap 根据平时的使用情形提供了六种形式的列表:( 普通列表、有序列表、去点列表、内联列表、描述列表、水平描述列表）。在样式方面 Bootstrap只是在原有的基础上做了一些细微的优化(margin 调整),其他差别不大，加入了一些样式。
[if !supportLists]1） [endif]去点列表:class="list-unstyled"
[if !supportLists]2） [endif]内联列表：class=” list-inline”
[if !supportLists]3） [endif]定义列表：在原有的基础加入了一些样式，使用样式 class=“.dl-horizontal”制作水平定义列表 : 当标题宽度超过160px时，将会显示三个省略号。
[if !supportLists]7、 [endif]代码
一般在个人博客上使用的较为频繁，用于显示代码的风格。
[if !supportLists]1） [endif]使用<code></code>来显示单行内联代码
[if !supportLists]2） [endif]使用<pre></pre>来显示多行块代码，样式：pre-scrollable(height,max-height高度固定，为340px，超过存在滚动条)
[if !supportLists]3） [endif]使用<kbd></kbd>来显示用户输入代码，如快捷键
不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代。
[if !supportLists]8、 [endif]表格
Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用 Bootstrap 的表格过程中，只需要添加对应的类名就可以得到不同的表格风格：
1) .table-striped：斑马线表格
2) .table-bordered：带边框的表格
3) .table-hover：鼠标悬停高亮的表格
4). table-condensed：紧凑型表格，单元格没内距或者内距较其他表格的内距更小
<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色
.active
.success
.info
.warning
.danger
[if !supportLists]七、 [endif]表单
表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。
[if !supportLists]1、 [endif]表单控件
.form-control .input-lg（较大） .input-sm（较小）
[if !supportLists]1) [endif]输入框
.form-control
[if !supportLists]2) [endif]下拉选择框select
多行选择设置：multiple="multiple"
[if !supportLists]3) [endif]文本域textarea
<textarea
class="form-control" rows="3"></textarea>
5）复选框checkbox
.checkbox，水平显示：.checkbox-inline
6）单选按钮
.radio，水平显示：.radio-inline
7）按钮
使用button实现
基础样式btn
附加样式：btn-primary
btn-info btn-success btn-warning
btn-danger btn-link btn-default
多标签支持：使用a div等制作按钮
<a href="##" class="btn btn-info">a 标签按钮</a>
<span class="btn btn-success">span 标签按钮</span>
<div class="btn btn-warning">div 标签按钮</div>
按钮大小
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
按钮禁用
方法 1：在标签中添加 disabled 属性
方法 2：在元素标签中添加类名“disabled”
在 class 属性中添加 disabled 只是样式上禁用了，并不是真正的禁用
了此按钮！
[if !supportLists]2、 [endif]表单案例
[if !supportLists]1） [endif]水平表单
同一行显示form-horizontal
配合 Bootstrap 框架的网格系统
[if !supportLists]2） [endif]内联表单：将表单的控件都在一行内显示 form-inline
注意 label 不会显示，存在的意义: 如果没有为输入控件设置 label 标签，屏幕阅读器将无法正确识别。这也是 Bootstrap 框架另一个优点之处，为残障人员进行了一定的考虑。
[if !supportLists]八、 [endif]下拉菜单
<!-- 如果要使用 Bootstrap 的 js 插件，必须先调入 jQuery
-->
<script
src="js/jquery-2.1.4.min.js"></script>
<!-- 包括所有 bootstrap 的 js 插件或者可以根据需要使用的 js 插件调用 -->
<script
src="js/bootstrap.min.js"></script>
要点：
1、使用一个类名为 dropdown 或 btn-group 的 div 包裹整个下拉框:
<div
class="dropdown"></div>
2、默认向下 dropdown，向上弹起加入 . dropup 即可
3、使用 button 作为父菜单，使用类名: dropdown-toggle 和自定义 data-toggle 属性
data-toggle="dropdown">
4、在 button 中使用 font 制作下拉箭头
<span
class="caret"></span>
5、下拉菜单项使用一个 ul 列表，并且定义一个类名为“dropdown-menu
6、分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能
7、分组标题: li 添加类名“dropdown-header”来实现分组的功能
8、对齐方式:
1)、dropdown-menu-left 左对齐默认样式
2)、dropdown-menu-right 右对齐
8、激活状态（.active）和禁用状态（.disabled）
[if !supportLists]九、 [endif]按钮组
同上引入 js，需要引入 bootstrap 的 fonts 文件夹。
要点：
1、使用一个类名为 btn-group 的 div 包裹整个按钮组
2、使用标签 button 、a、span 制作按钮，需要指定类名.btn
3、使用 span 制作图标
4、大小分类: btn-group-lgbtn-group btn-group-sm btn-group-xs
5、等分按钮: 自适应分组按钮 btn-group-justified
6、默认为水平，使用 btn-group-vertical 制作垂直按钮组
7、按钮工具栏: 在外层套用 .btn-toolbar 即可
8、注意：btn-group-lg 仅仅是放大按钮，不能将所有的按钮作为连接在一起的按钮组
[if !supportLists]十、 [endif]导航
使用下拉与按钮组合可以制作导航
要点：
1、基本样式: .nav 与“nav-tabs”、“nav-pills”组合制作导航
2、分类:
1)、标签型 (nav-tabs)导航
2)、胶囊形(nav-pills)导航
3)、堆栈(nav-stacked)导航
4)、自适应(nav-justified)导航
5)、面包屑式(breadcrumb)导航，单独使用样式，不与 nav 一起使用,直接加入到 ol、ul 中即可，一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）
3、状态:
1)、选中状态 active 样式
2)、禁用状态: disable
4、二级菜单
[if !supportLists]十一、 [endif]分页导航
分页随处可见，分为页码导航和翻页导航
页码导航:ul 标签上加 pagination [pagination-lg | pagination-sm]
翻页导航: ul 标签上加 pager
[if !supportLists]十二、 [endif]缩略图
缩略图在电商类的网站很常见，最常用的地方就是产品列表页面。缩略图的实现是配合网格系统一起使用。同时还可以让缩略图配合标题、描述内容，按钮等。
[if !supportLists]十三、 [endif]面板
缩略图在电商类的网站很常见，最常用的地方就是产品列表页面。缩略图的实现是配合网格系统一起使用。同时还可以让缩略图配合标题、描述内容，按钮等。
