官方手册（英文）：http://getbootstrap.com/docs/3.3/getting-started/
中文文档：https://v3.bootcss.com/getting-started/
菜鸟教程：http://www.runoob.com/bootstrap/bootstrap-tutorial.html
标题
<h1>header</h1>
<h2>header</h2>
<h3>header</h3>
<h4>header</h4>
<h5>header</h5> <div class="h1">标题<small>这是副标题</small></div>
<div class="h2">标题</div>
<div class="h3">标题</div>
<div class="h4">标题</div>
<div class="h5">标题</div>
段落以及文本
<p>this is test</p> <!--
<mark>标签包含的内容会有浅色的背景
<del>标签包含的内容中间会有删除线
<ins>标签包含的内容出现下划线
<small>标签会以小字体显示内容
<strong>标签会加粗内容
-->
<mark>two</mark> <del>three</del> <ins>four</ins> <small>five</small> <p class="text-left">文本居左显示</p>
<p class="text-right">文本居右显示</p>
<p class="text-center">文本居中显示</p> <!--
.text-lowercase 全部改为小写
.text-uppercase 全部改为大写
.text-capitalize 首字母大写
-->
<p class="text-lowercase">ABCDEFG</p>
<p class="text-uppercase">abcdefg</p>
<p class="text-capitalize">abcdefg</p>
表格
<!--
可以为table标签添加如下样式
.table 默认包含一些样式（表宽度为100%，显示tr的边框，不显示td的边框）
.table-striped 斑马线效果
.table-bordered 显示所有单元格的边框
.table-hover 鼠标移动到某一行时变色 可以为每一个tr或者td添加如下样式
.denger 危险状态
.warning 警告状态
.success 操作成功状态
.info 提示状态
.active 选中状态
-->
<table class="table table-striped table-bordered table-hover">
<thead>
<th>11111</th>
<th>11111</th>
<th>11111</th>
<th>11111</th>
</thead>
<tbody>
<tr>
<td class="info">22222</td>
<td>22222</td>
<td>22222</td>
<td>22222</td>
</tr>
<tr class="success">
<td>22222</td>
<td>22222</td>
<td>22222</td>
<td>22222</td>
</tr>
</tbody>
</table>
表单
<!--
表单中的每一个表单项可以使用一个div来包裹，设置其class为form-group，表示这是一个输入组件
每一个表单项的class设置为form-control，就可以使用bootstrap的表单样式 对于form-group，可以通过添加has-success、has-warning、has-error这些状态值，设置表单状态
-->
<form action="">
<div class="form-group has-success" >
<label for="demo">Input</label>
<input type="text" id="demo"class="form-control">
</div> <div class="form-group has-error">
<label for="sele">select</label>
<select name="" id="sele" class="form-control">
<option value="">aaaa</option>
<option value="">aaaa</option>
<option value="">aaaa</option>
</select>
</div> <div class="form-group has-warning">
<label for="text">select</label>
<textarea name="" id="text" cols="30" rows="10" class="form-control"></textarea>
</div>
</form>
按钮
<!-- 默认的样式 -->
<button>click</button> <!-- bootstrap中按钮的默认样式，灰色背景（hover效果），带圆角 -->
<button class="btn">click</button> <!-- 不同颜色的bootstrap按钮 -->
<button class="btn btn-default">click</button>
<button class="btn btn-success">click</button>
<button class="btn btn-primary">click</button>
<button class="btn btn-warning">click</button>
<button class="btn btn-danger">click</button>
<button class="btn btn-link">click</button> <!-- 不同大小的bootstrap按钮 -->
<button class="btn btn-sm">click</button>
<button class="btn btn-lg">click</button>
<!-- btn-block 宽度100%的按钮 -->
<button class="btn btn-block">click</button> <!-- 不同状态的bootstrap按钮 -->
<button class="btn active">click</button>
<button class="btn disabled">click</button> <!-- 可以使用a、div、span加上btn的class来创建按钮 -->
<a href="" class="btn btn-default">click</a>
<div href="" class="btn btn-default">click</div>
<span href="" class="btn btn-default">click</span>
图片
<img src="demo.png">
<!-- 圆角 -->
<img src="demo.png" class="img-rounded"> <!-- 圆形的边框 -->
<img src="demo.png" class="img-circle"> <!-- 带边框 -->
<img src="demo.png" class="img-thumbnail">
设置响应式
meta的name设置为viewport
width、height：可以设置为设备宽高device-width、device-height。
initial-scale：初始缩放比例
maximum-scale、minimum-scale：用户缩小和放大内容时的最小和最大比例。
user-scalable：设置为yes时，允许用户缩放；为no时，不允许用户进行缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximux-scale=1.5, minimum-scale=0.5, user-scalable=yes">
栅格
<!--
col-xx-xx要放在 .row中包含 宽度：
col-lg-x col-md-x col-sm-x分别在大屏、中屏、小屏中显示的宽度。
基数为12，表示100%，比如col-lg-4，表示在大屏的时候，该元素的宽度是4/12个宽度。
可以对同一个元素同时设置上面的三个宽度，实现响应式。 偏移：
col-lg-offset-x col-md-offset-x col-sm-offset-x分别在大屏、中屏、小屏中设置元素的偏移
基数仍为12，表示100%，比如col-lg-offset-5表示在大屏的时候，该元素距离左边有5/12个宽度。
-->
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-8 col-sm-offset-8" style="background:red;height:100px"></div>
</div>
图标
bootstrap中的图标使用的是glyphicons图标。
浏览图标可以访问：https://v3.bootcss.com/components/
使用方法，直接将图标名称写在class中即可。
<i class="glyphicon glyphicon-asterisk"></i>
设置图标的颜色和大小，可以在<style>中修改，
.glyphicon-asterisk { color:red; font-size:40px;}
按钮+图标
<button class="btn btn-primary">
<i class="glyphicon glyphicon-star"></i>
收藏
</button>
下拉菜单
使用下拉菜单的时候，要引入jquery、bootstrap.min.js
<div class="dropdown">
<button class="btn btn-default btn-toggle" data-toggle="dropdown">
请选择
<i class="caret"></i>
</button>
<ul class="dropdown-menu">
<li><a href="">demo</a></li>
<li class="divider"></li>
<li><a href="">demo</a></li>
<li><a href="">demo</a></li>
</ul>
</div>
输入框组件
<form action="">
<div class="col-lg-4">
<label for="demo">Please Input URL</label>
<div class="input-group" id="demo">
<span class="input-group-addon">https://</span>
<input type="text" class="form-control">
<span class="input-group-addon">.com</span>
</div>
</div>
</form>
导航
<!-- tab类型 -->
<ul class="nav nav-tabs">
<li class="active"><a href="">one</a></li>
<li><a href="">one</a></li>
<li class="disabled"><a href="">one</a></li>
</ul> <!-- 胶囊类型 -->
<ul class="nav nav-pills">
<li class="active"><a href="">one</a></li>
<li><a href="">one</a></li>
<li class="disabled"><a href="">one</a></li>
</ul> <!-- 垂直类型 -->
<ul class="nav nav-stacked">
<li class="active"><a href="">one</a></li>
<li><a href="">one</a></li>
<li class="disabled"><a href="">one</a></li>
</ul>
分页
<ul class="pagination">
<li><a href="#"><span>«</span></a></li>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">2</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="#"><span>»</span></a></li>
</ul>
进度条
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" style="width:60%">60%</div>
</div>
可以使用jquery来改变style中的width和元素文本来怪变进度条状态。
列表与徽章
<ul class="list-group col-lg-2">
<li class="list-group-item list-group-item-success">
one
<span class="badge">1</span>
</li>
<li class="list-group-item active">
two
<span class="badge">2</span>
</li>
<li class="list-group-item disabled">
three
<span class="badge">3</span>
</li>
</ul>
面板
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">警告</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
弹窗
<button class="btn btn-defualt" data-toggle="modal" data-target="#dialog">显示弹出框</button> <div class="modal fade" id="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title">弹窗标题</h4>
</div>
<div class="modal-body">
<p>弹窗主体</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">确认</button>
</div>
</div>
</div>
</div>