• Bootstrap(10) 进度条媒体对象和 Well 组件


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

            <!-- //嵌入效果 -->
        <div class="well">Bootstrap</div>
        <!-- //有 lg 和 sm 两种可选值 -->
        <div class="well well-lg">Bootstrap</div>
        <div class="well well-sm">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+支持

    <!-- //条纹状,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-striped active" 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="Bootstrap/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="Bootstrap/img/small.png" alt="" class="media-object">
            </div>
        </div>

    //媒体对象列表

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

  • 相关阅读:
    Java程序语言的后门-反射机制
    JAVA设计模式-单例模式(Singleton)线程安全与效率
    JAVA设计模式-动态代理(Proxy)源码分析
    Mybatis源码解析,一步一步从浅入深(七):执行查询
    Mybatis源码解析,一步一步从浅入深(六):映射代理类的获取
    python程序中的进程操作
    进程
    操作系统的发展史
    详尽实用的 PyCharm 教程
    python的socketserver模块实现TCP/UDP并发
  • 原文地址:https://www.cnblogs.com/zhangjinru123/p/7281847.html
Copyright © 2020-2023  润新知