Bootstrap本次知识点1.进度条2.媒体对象3.列表组4.面板5.响应式嵌入组件6.wel...
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，如需转载请联系原作者
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
上一篇：java操作cookie 下一篇：数据分析那点事儿（四）
