• 第 11 章 进度条媒体对象和 Well 组件

    第 11 章 进度条媒体对象和 Well 组件

    学习要点:

    1.Well 组件

    2.进度条组件

    3.媒体对象组件

    主讲教师:李炎恢

    本节课我们主要学习一下 Bootstrap 的三个组件功能:Well 组件、进度条组件、媒体对象组件。

    一.Well 组件

    这个组件可以实现简单的嵌入效果。

    //嵌入效果

    1. <div class="well"> Bootstrap </div>

    //有 lg 和 sm 两种可选值

    1. <div class="well well-lg"> Bootstrap </div>

    二.进度条组件

    进度条组件为当前工作流程或动作提供时时反馈。

    //基本进度条

    1. <div class="progress">
    2. <div class="progress-bar" style="width: 60%;"> 60% </div>
    3. </div>

    //最低值进度条

    1. <div class="progress">
    2. <div class="progress-bar" style="min-width:20px"> 0% </div>
    3. </div>

    //结合情景的进度条

    1. <div class="progress">
    2. <div class="progress-bar progress-bar-success" style="min-width:20px;width:60%"> 60% </div>
    3. </div>

    //条纹状,IE10+支持

    1. <div class="progress">
    2. <div class="progress-bar progress-bar-success
    3. progress-bar-striped" style="min-width:20px;width:60%"> 60% </div>
    4. </div>

    //动画效果

    1. <div class="progress">
    2. <div class="progress-bar progress-bar-success progress-bar-stripedactive" style="min-width:20px;width:60%"> 60% </div>
    3. </div>

    //堆叠效果

    1. <div class="progress">
    2. <div class="progress-bar progress-bar-success" style="min-width:20px;width:35%"> 35% </div>
    3. <div class="progress-bar progress-bar-warning" style="min-width:20px;width:20%"> 20% </div>
    4. <div class="progress-bar progress-bar-danger" style="min-width:20px;width:10%"> 10% </div>
    5. </div>

    三.媒体对象组件

    媒体对象可以包含图片、视频或音频等媒体,以达到对象和文本组合显示的样式效果。

    //基本实例

    1. <div class="media">
    2. <div class="media-left">
    3. <img src="img/small.png" alt="" class="media-object">
    4. </div>
    5. <div class="media-body">
    6. <h4 class="media-heading">标题</h4>
    7. <p> 企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔;脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状;羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个种的主要区别在于头部色型和个体大小。 </p>
    8. </div>
    9. </div>

    //媒体对象在右边

    1. <div class="media">
    2. <div class="media-body">
    3. <h4 class="media-heading">标题</h4>
    4. <p> 企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔;脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状;羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个种的主要区别在于头部色型和个体大小。 </p>
    5. </div>
    6. <div class="media-right">
    7. <img src="img/small.png" alt="" class="media-object">
    8. </div>
    9. </div>

    //媒体对象列表

    1. <ul class="media-list">
    2. <li class="media"> //将每个 media 存放在 media-body 内后即可
    3. ...代码较多,具体看视频 </li>
    4. </ul>

    原文: https://wizardforcel.gitbooks.io/liyanhui-tutorials/content/55.html