转载请注明原文地址：
一：准备
下载：http://getbootstrap.com/
导入： jquery.js、bootstrap.min.js 、 bootstrap.min.css
二：基本元素
1：网格
| <table> | 为表格添加基础样式。 |
| <thead> | 表格标题行的容器元素（<tr>），用来标识表格列。 |
| <tbody> | 表格主体中的表格行的容器元素（<tr>）。 |
| <tr> | 一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）。 |
| <td> | 默认的表格单元格。 |
| <th> | 特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。 |
1）普通网格
| 名称 |
|---|
| Tanmay |
| Mumbai |
2）条纹网格
<table class="table table-striped">
3）带表框表格
<table class="table table-bordered">
4）悬停表格
<table class="table table-hover">
5）响应式表格
<div class="table-responsive">
2：表单
1）基本表单
- 父 <form> 元素添加 role="form"。
- form中一个<div> 一个小分块，添加class =form-group 属性获得最近行距
2）内联表单
元素是内联的，向左对齐，标签并排。向 <form> 标签添加 class =form-inline属性即可。
3）水平表单
- 向父 <form> 元素添加 class=form-horizontal。
- form中一个<div> 一个小分块，添加class =form-group 属性获得最近行距
表单控件：
1）输入框:input 类型包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
2）文本框：进行多行输入的时，则可以使用文本框 textarea。
3）复选框（Checkbox）和单选框（Radio）：使用 class=checkbox-inline 或 class=radio-inline，控制它们显示在同一行上.
4）选择列表：
5）纯文本：
纯文本
6）帮助文本：
帮助文本块
3：按钮
4：图片标签<img>
通过指定class属性来进行图片的多种形式显示：
| img-rounded | 为图片添加圆角 (IE8 不支持) |
| img-circle | 将图片变为圆形 (IE8 不支持) |
| img-thumbnail | 缩略图功能 |
| img-responsive | 图片响应式 (将很好地扩展到父元素) |
三：布局组件
1：字体图标
如需使用图标，只需要简单地使用下面的代码即可。
<span class="glyphicon glyphicon-图标名"></span>
具体图标样式见：http://www.runoob.com/bootstrap/bootstrap-glyphicons.html
2:下拉菜单
3：按钮组
4：导航菜单
主要有：
| .nav nav-tabs | 标签页 |
| .nav nav-pills | 胶囊式标签页 |
| .nav nav-pills nav-stacked | 胶囊式标签页以垂直方向堆叠排列的 |
| .nav-justified | 两端对齐的标签页，在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。 |
5：面包屑导航栏
6：分页
| .pager | 一个简单的分页链接，链接居中对齐。 |
| .previous | .pager 中上一页的按钮样式，左对齐 |
| .next | .pager 中下一页的按钮样式，右对齐 |
| .disabled | 禁用链接 |
| .pagination | 分页链接 |
| .pagination-lg | 更大尺寸的分页链接 |
| .pagination-sm | 更小尺寸的分页链接 |
| .disabled | 禁用链接 |
| .active | 当前访问页面链接样式 |
7：各种样式标签
| .label label-default | 默认的灰色标签 |
| .label label-primary | "primary" 类型的蓝色标签 |
| .label label-success | "success" 类型的绿色标签 |
| .label label-info | "info" 类型的浅蓝色标签 |
| .label label-warning | "warning" 类型的黄色标签 |
| .label label-danger | "danger" 类型的红色标签 |
8：徽章图标
<span class="badge">徽章文字</span>
9：标题
<div class="page-header">
10：警告信息
成功！信息！警告！错误！
11：进度条：通过style控制进度显示
12：多媒体
//插入多媒体：视频、音频、图片
文字介绍信息
13：列表组
- 1
- 2
- 3
14：面板
标题面板内容
15：轮播
