首页 > 代码库 > Bootstrap 进度条媒体对象和 Well 组件
Bootstrap 进度条媒体对象和 Well 组件
一．Well 组件
这个组件可以实现简单的嵌入效果。
//嵌入效果
<div class="well"> Bootstrap </div>
//有 lg 和 sm 两种可选值
<div class="well well-lg"> Bootstrap </div>
二．进度条组件
进度条组件为当前工作流程或动作提供时时反馈。
//进度条
<div class="progress"> <div class="progress-bar" style="width: 60%;">60%</div> </div>
//最低值进度条
<div class="progress"> <div class="progress-bar" style="min-width:20px">0%</div> </div>
//结合情景的进度条
<div class="progress"> <div class="progress-bar progress-bar-success" style="min-width:20px;width:60%">60%</div>
</div>
//条纹状，IE10+支持
<div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" style="min-width:20px;width:60%">60%</div> </div>
//动画效果
<div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped active" style="min-width:20px;width:60%">60%</div> </div>
//堆叠效果
<div class="progress"> <div class="progress-bar progress-bar-success" style="min-width:20px;width:35%">35%</div> <div class="progress-bar progress-bar-warning" style="min-width:20px;width:20%">20%</div> <div class="progress-bar progress-bar-danger" style="min-width:20px;width:10%">10%</div> </div>
三．媒体对象组件
媒体对象可以包含图片、视频或音频等媒体，以达到对象和文本组合显示的样式效果。
//基本实例
<div class="media"> <div class="media-left"> <img src="yhmgc/img/4.jpg" alt="" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">标题</h4> <p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老 的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。
全世界的企鹅共有 17 种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔； 脚生于身体最下部，故呈直立姿势；趾间有蹼；
跖行性（其他鸟类以趾着地）；前肢成鳍状； 羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个 种的主要区别在于头部色型和个体大小。
</p> </div> </div>
//媒体对象在右边
<div class="media"> <div class="media-body"> <h4 class="media-heading">标题</h4> <p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老 的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。
全世界的企鹅共有 17 种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔； 脚生于身体最下部，故呈直立姿势；趾间有蹼；
跖行性（其他鸟类以趾着地）；前肢成鳍状； 羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个 种的主要区别在于头部色型和个体大小。
</p> </div> <div class="media-right"> <img src="yhmgc/img/4.jpg" alt="" class="media-object"> </div> </div>
//媒体对象列表
<ul class="media-list"> <!--1开始--> <li class="media"> <div class="media-left"> <img src="yhmgc/img/4.jpg" alt="" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">标题</h4> <p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老 的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有 17 种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔； 脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状； 羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个 种的主要区别在于头部色型和个体大小。</p> <!--1-1开始--> <div class="media"> <div class="media-left"> <img src="yhmgc/img/4.jpg" alt="" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">标题</h4> <p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老 的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有 17 种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔； 脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状； 羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个 种的主要区别在于头部色型和个体大小。</p> <!--2-1开始--> <div class="media"> <div class="media-left"> <img src="yhmgc/img/4.jpg" alt="" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">标题</h4> <p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老 的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有 17 种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔； 脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状； 羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个 种的主要区别在于头部色型和个体大小。</p> </div> </div> <!--2-1结束--> </div> </div> <!--1-1结束--> <!--1-2开始--> <div class="media"> <div class="media-left"> <img src="yhmgc/img/4.jpg" alt="" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">标题</h4> <p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老 的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有 17 种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔； 脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状； 羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个 种的主要区别在于头部色型和个体大小。</p> </div> </div> <!--1-2结束--> </div> </li> <!--1结束--> <li class="media"> <div class="media-left"> <img src="yhmgc/img/4.jpg" alt="" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">标题</h4> <p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老 的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有 17 种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔； 脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状； 羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个 种的主要区别在于头部色型和个体大小。</p> </div> </li> </ul>
效果图：
Bootstrap 进度条媒体对象和 Well 组件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。