一．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="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+支持

<!-- //条纹状，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="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>

Bootstrap(10) 进度条媒体对象和 Well 组件的更多相关文章

  1. 第二百四十一节，Bootstrap进度条媒体对象和 Well 组件

    第二百四十一节,Bootstrap进度条媒体对象和 Well 组件 学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件 本节课我们主要学习一下 Bootstrap 的三个组件功能:Wel ...

  2. Bootstrap 进度条媒体对象和 Well 组件

    一．Well 组件 这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 lg 和 ...

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

    学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件 主讲教师:李炎恢 本节课我们主要学习一下 Bootstrap 的三个组件功能:Well 组件.进度条组件.媒体对象组件. 一．Well ...

  4. （十）进度条媒体对象和 Well 组件

    一．Well 组件 有 lg 和 sm 两种可选值 <div class="well well-lg"> Bootstrap </div> 二．进度条组件 ...

  5. Bootstrap 学习笔记5 进度条媒体对象和well组件

    代码: <ul class="media-list"> <li class="media"> <div class="m ...

  6. Bootstrap 进度条媒体对象和条组

    列表组组件 列表组组件用于显示一组列表的组件. //基本实例 <ul class="list-group"> <li class="list-group ...

  7. Bootstrap 各种进度条详解

    一:默认的进度条 创建一个基本的进度条的步骤如下: 添加一个带有 class .progress 的 <div>. 接着,在上面的 <div> 内,添加一个带有 class . ...

  8. atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

    atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...

  9. Bootstrap各种进度条的实例讲解

    本章将讲解 Bootstrap 进度条.在本教程中,您将看到如何使用bootstrap教程.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Interne ...

随机推荐

  1. Mybatis if 判断等于一个字符串

    在做开发的时候遇到这样一个问题:当传入的type的值为y的时候,if判断内的sql也不会执行.   <if test="type=='y'">   and status ...

  2. elk日志平台搭建小记

    最近抽出点时间,搭建了新版本的elk日志平台 elastaicsearch 和logstash,kibana和filebeat都是5.6版本的 中间使用redis做缓存,版本为3.2 使用的系统为ce ...

  3. Linux Install redis

    1.将下载好的压缩包放到/usr/local目录下# tar xzf redis-3.0.2.tar.gz # cd redis-3.0.2 # make//--------------------- ...

  4. ArcGIS模型构建器案例教程-批量修改工作空间所有要素类的空间参考

    ArcGIS模型构建器案例教程-批量修改工作空间所有要素类的空间参考 目的:批量修改工作空间所有要素类的空间参考(坐标系) 工具名称:WorkspaceChangeSpatialReference 使 ...

  5. shiro中的授权

  6. Redis入门及主从配置

    1.Redis入门简介 Redis是一个开源的使用ANSI C语音编写.支持网络.可基于内存亦可持久化的日志型,Key-Value数据库.支持存储的value类型包括 string(字符串).list ...

  7. hive sql 效率提升

    转 :  http://www.cnblogs.com/xd502djj/p/3799432.html hive的查询注意事项以及优化总结 . Hive是将符合SQL语法的字符串解析生成可以在Hado ...

  8. Makefile编写参考

    http://www.ruanyifeng.com/blog/2015/02/make.html

  9. Latex公式示范

    \(A_\alpha(x)\)      \(\qquad\)      \(a^2+b^2=c^2 \)      \(\qquad\)      \(\sum\limits_{m=0}^\inft ...

  10. Java(8)中List的遍历方式

    ============Java8之前的方式==========Map<String, Integer> items = new HashMap<>();items.put(& ...