知识点：
1、进度条
2、媒体对象
3、列表组
4、面板
5、响应式嵌入组件
6、well
1、进度条
1）默认的进度条
<div class="progress">
<div class="progress-bar" style="width:45%;">45%</div>
</div>
2）情景变化的进度条
<div class="progress">
<div class="progress-bar progress-bar-info" style="width:60%;">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:25%;">25%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width:45%;">45%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:45%;">45%</div>
</div>
3）条纹的进度条 progress-striped
<div class="progress progress-striped">
<div class="progress-bar" style="width:45%;">45%</div>
</div>
4）动画的进度条 active
<div class="progress progress-striped active">
<div class="progress-bar" style="width:45%;">45%</div>
</div>
5）堆叠的进度条
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:45%;">45%</div>
<div class="progress-bar progress-bar-success" style="width:25%;">25%</div>
</div>
2、媒体对象
<div class="media">
<a href="" class="pull-left"></a>
<div class="media-body">
<h4 class="media-heading">媒体标题</h4>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
</div>
</div>
3、列表组
1）向列表组添加国徽
<ul class="list-group">
<li class="list-group-item"><a href="">免费域名注册 <span class="badge pull-right">20</span></a></li>
<li class="list-group-item"><a href="">免费 Window 空间托管</a></li>
<li class="list-group-item"><a href="">每年更新成本</a></li>
</ul>
2）向列表组添加链接
<div class="list-group">
<a href="" class="list-group-item active">免费域名注册</a>
<a href="" class="list-group-item">免费 Window 空间托管</a>
<a href="" class="list-group-item">每年更新成本</a>
</div>
3）向列表组添加自定义内容
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
4、面板
1）面板标题
<div class="panel-heading">标题</div>
2）面板脚注
<div class="panel-footer text-right">by zichen</div>
3）面板主题
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
4）带表格的面板
<div class="panel panel-default">
<div class="panel-heading">Panel heading</div>
<table class="table">
<tr>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</table>
</div>
5）带列表组的面板
<div class="panel panel-danger">
<div class="panel-heading">标题</div>
<div class="panel-body">面板内容显示区域</div>
<ul class="list-group">
<li class="list-group-item">免费域名注册</li>
<li class="list-group-item">免费 Window 空间托管</li>
<li class="list-group-item">图像的数量</li>
<li class="list-group-item">24*7 支持</li>
<li class="list-group-item">每年更新成本</li>
</ul>
<div class="panel-footer text-right">by zichen</div>
</div>
5、响应式嵌入组件
根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定 内容的尺寸，能够在各种设备上缩放。
这些规则可以直接用于<iframe>、<embed>、<video>和<object>元素。
//16:9 响应式
<div class="embed-responsive embed-responsive-16by9">
<embed width="100%" height="100%" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></embed>
</div>
//4:3 响应式
<div class="embed-responsive embed-responsive-4by3">
<embed width="100%" height="100%" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></embed>
</div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
</div>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
</div>
6、well
1）基本的well
<div class="well">您好，我在大的 Well 中！</div>
2）尺寸大小 well-lg well-sm
<div class="well well-lg">您好，我在大的 Well 中！</div>
<div class="well well-sm">您好，我在大的 Well 中！</div>