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="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 组件的更多相关文章

第二百四十一节，Bootstrap进度条媒体对象和 Well 组件
第二百四十一节,Bootstrap进度条媒体对象和 Well 组件学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件本节课我们主要学习一下 Bootstrap 的三个组件功能:Wel ...
Bootstrap 进度条媒体对象和 Well 组件
一．Well 组件这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 lg 和 ...
第 11 章进度条媒体对象和 Well 组件
学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件主讲教师:李炎恢本节课我们主要学习一下 Bootstrap 的三个组件功能:Well 组件.进度条组件.媒体对象组件. 一．Well ...
（十）进度条媒体对象和 Well 组件
一．Well 组件有 lg 和 sm 两种可选值 <div class="well well-lg"> Bootstrap </div> 二．进度条组件 ...
Bootstrap 学习笔记5 进度条媒体对象和well组件
代码: <ul class="media-list"> <li class="media"> <div class="m ...
Bootstrap 进度条媒体对象和条组
列表组组件列表组组件用于显示一组列表的组件. //基本实例 <ul class="list-group"> <li class="list-group ...
Bootstrap 各种进度条详解
一:默认的进度条创建一个基本的进度条的步骤如下: 添加一个带有 class .progress 的 <div>. 接着,在上面的 <div> 内,添加一个带有 class . ...
atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7
atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...
Bootstrap各种进度条的实例讲解
本章将讲解 Bootstrap 进度条.在本教程中,您将看到如何使用bootstrap教程.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Interne ...

随机推荐

SITE STRUCTURE
SITE STRUCTURE HTML Review Congratulations! You've learned enough HTML to create a great website! Be ...
COBOL和C#比较
<予備>
Zeosdbo-Query使用
with DataModule1.Zlxz_zy_Query do begin Close; SQL.Clear; SQL.Add( ...
函数mmap()的使用
函数mmap是linux的一个系统函数.如下: 函数原型:void *mmap(void *addr, size_t length, int prot, int flags,int fd, off_t ...
webstorm添加多个项目
在webstorm工作目录下,添加其他项目,不用每个项目打开一个webstorm,刚开始使用webstorm的时候,每次打开一个项目的时,都要打开一个开发界面,在这几个窗口之间来回的切换,有一天真的感 ...
MySQL字符集介绍及配置
目录 1.MySQL编码集 2.修改字符集 3.MySQL数据库中字符集转换流程 4.修改现有字符集 1.MySQL编码集查看MySQL支持的字符集 mysql> show character ...
为tomcat配置项目必须的引擎文件
1.如下图所示,红框圈出来的四个语音引擎文件是直接放在项目根目录下的,这样的话我们发布web应用的时候,项目并不能自动把这几个文件打包到tomcat中, 除非放到WebRoot文件夹下,但是这样的话项 ...
springboot 整合task定时任务
一步:在启动类中加入加入就会调用定时了. //开启定时任务开启后就可以被扫描到 @EnableScheduling 二步:建一个tasks工具包都会被扫描到的了有三个类 Async ...
升级tensorflow1.0到1.3，报错ImportError: libcudnn.so.6: cannot open shared object file: No such file or directory Failed to load the native TensorFlow runtime.
先定位问题,发现在 /usr/local/cuda/include/ /usr/local/cuda/lib64/ 下面只有 libcudnn.so.5 因此,只要下载cudnn6.*版本的文件分别覆 ...
js基础-基本包装类型
var t = 13; t.toString(); //t是一个简单数值类型现在有了方法 toString 对象类型的方法 //数值类型有对应的包装类型 var t1 =new Number(333 ...

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

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

随机推荐

热门专题