一．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. 使用ab对网站进行压力测试

    1.安装yum install httpd-tools 2.ab -kc 1000 -n 1000 http://localhost/ab.html 这个指令会使用1000个并发,进行连接1000次

  2. MyBatis基础-1

    1.Mybatis简介 2.Mybatis环境搭建 3.Mybatis的开发方式 一.什么框架 框架其本质是半成品程序,提供相关规范,并且提供大量可重用的组件. 目的:让开发者开发出结构比较良好,可读 ...

  3. 讲一讲Servlet和JSP的关系

    Test.jsp在运行时首先被解析成一个java类Test_jsp.java,该类继承于org.apache.jasper.runtime.HtppJspBase类,而Http又是继承HttpServ ...

  4. C++ 网络编程 总结

    第一次用C++写程序,对C++ 只是菜鸟级别的,倒是对C#很熟悉.两者有很大的相似性.但也有不同. 首先写了一个网络通讯用的小的MFC程序.发现 (1)MFC写界面真的好麻烦呀.  用C#写的tab ...

  5. SQL中ISNULL的问题。

    今天在写SQL代码的时候写了个 ISNULL(变量1,变量2),返回的结果居然是 "*" ,这个星号,郁闷了很久. 代码大意如下: ) declare @str2 int sele ...

  6. GankApp 侧滑和title修改颜色的完整项目app

    GankApp 侧滑和title修改颜色的完整项目app GankApp 侧滑和title修改颜色的完整项目app,本项目主要由侧滑框架和4.4以及以上的头部title颜色调整和, 首页viewpag ...

  7. set 转 enumeration

  8. 吴裕雄 python 机器学习-Logistic（1）

    import numpy as np def loadDataSet(): dataMat = [] labelMat = [] fr = open('D:\\LearningResource\\ma ...

  9. ROC，AUC，Precision，Recall，F1的介绍与计算（转）

    1. 基本概念 1.1 ROC与AUC ROC曲线和AUC常被用来评价一个二值分类器(binary classifier)的优劣,ROC曲线称为受试者工作特征曲线 (receiver operatin ...

  10. 理解JVM2 栈内存，方法区，堆内存

    堆,方法区,栈的关系 分配最大堆内存-Xmx32m class SimpleHeap(val id: Int){ fun show() = println("My id is $id&quo ...