# 第 11 章 进度条媒体对象和 Well 组件 **学习要点：** 1.Well 组件 2.进度条组件 3.媒体对象组件 主讲教师：李炎恢 本节课我们主要学习一下 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-stripedactive" 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="img/small.png" 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="img/small.png" alt="" class="media-object"> </div> </div> ``` //媒体对象列表 ``` <ul class="media-list"> <li class="media"> //将每个 media 存放在 media-body 内后即可 ...代码较多，具体看视频 </li> </ul> ```