Bootstrap本次知识点
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">
<img class="media-object" src="images/kittens.jpg" alt="" width="95"/>
</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>
本次Bootstrap前端开发框架学习到此完结，欢迎大家参与学习！！感谢大家的支持！谢谢！ ^_^
原文发布时间：2018年06月21日 08:30:14
原文作者：Roger_CoderLife
本文来源CSDN，如需转载请联系原作者
