zoukankan      html  css  js  c++  java
  • 第 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=" 60%;">
            60%
        </div>
    </div>

    //最低值进度条

    <div class="progress">
        <div class="progress-bar" style="min-20px">
            0%
        </div>
    </div>

    //结合情景的进度条

    <div class="progress">
        <div class="progress-bar progress-bar-success"
        style="min-20px;60%">
            60%
        </div>
    </div>

    //条纹状,IE10+支持

    <div class="progress">
        <div class="progress-bar progress-bar-success
        progress-bar-striped" style="min-20px;60%">
            60%
        </div>
    </div>

    //动画效果

    <div class="progress">
        <div class="progress-bar progress-bar-success progress-bar-stripedactive" style="min-20px;60%">
            60%
        </div>
    </div>

    //堆叠效果

    <div class="progress">
        <div class="progress-bar progress-bar-success"
        style="min-20px;35%">
            35%
        </div>
        <div class="progress-bar progress-bar-warning"
        style="min-20px;20%">
            20%
        </div>
        <div class="progress-bar progress-bar-danger"
        style="min-20px;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>
  • 相关阅读:
    十二经络容易堵塞穴位
    考研英语词汇-乱序便携版-遗忘曲线
    分享一个硬核理工类科普节目:回到2049(12月17号取消置顶)
    191129
    191130
    191128
    191127
    191126
    191125
    微信公众号自定义菜单中添加图标(转)
  • 原文地址:https://www.cnblogs.com/zfc2201/p/5426795.html
Copyright © 2011-2022 走看看