分享程序员开发的那些事...
更新时间：2022-05-23 21:17:52
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.***.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.***.com/embed/zpOULjyy-n8?rel=0"></embed>
</div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.***.com/embed/zpOULjyy-n8?rel=0"></iframe>
</div>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.***.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，如需转载请联系原作者