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

学习要点：

　　1.Well 组件

　　2.进度条组件

　　3.媒体对象组件

本节课我们主要学习一下 Bootstrap 的三个组件功能：Well 组件、进度条组件、媒体对 象组件。

一．Well 组件

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

嵌入效果

well样式class类，写在<div>里，设置一个div区块嵌入效果(Bootstrap)
well-lg样式class类，写在<div>里，设置一个div区块嵌入效果大尺寸(Bootstrap)
well-sm样式class类，写在<div>里，设置一个div区块嵌入效果小尺寸(Bootstrap)

<div class="well">

    Bootstrap

</div>

<div class="well well-lg">

    Bootstrap

</div>

<div class="well well-sm">

    Bootstrap

</div>

二．进度条组件

进度条组件为当前工作流程或动作提供时时反馈。

基本进度条

progress样式class类，写在<div>里，声明一个进度条区域(Bootstrap)

progress-bar样式class类，写在<div>里，设置一个进度条默认样式(Bootstrap)

<div class="progress">

    <div class="progress-bar" style="width: 60%;">60%</div>

</div>

最低值进度条

<div class="progress">

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

</div>

结合情景的进度条

progress-bar-success样式class类，写在<div>元素里，设置进度条绿色(Bootstrap)
progress-bar-info样式class类，写在<div>元素里，设置进度条蓝色(Bootstrap)
progress-bar-warning样式class类，写在<div>元素里，设置进度条橙色(Bootstrap)
progress-bar-danger样式class类，写在<div>元素里，设置进度条红色(Bootstrap)

<div class="progress">

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

    </div>

</div>

<div class="progress">

    <div class="progress-bar progress-bar-info" style="min-width:20px;width:60%">60%

    </div>

</div>

<div class="progress">

    <div class="progress-bar progress-bar-warning" style="min-width:20px;width:60%">60%

    </div>

</div>

<div class="progress">

    <div class="progress-bar progress-bar-danger" style="min-width:20px;width:60%">60%

    </div>

</div>

条纹状，IE10+支持，IE10以下不支持

progress-bar-striped样式class类，写在<div>元素里，设置条纹状进度条(Bootstrap)

<div class="progress">

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

    </div>

</div>

条纹状动画效果，必须将进度条设置条纹状

active样式class类，写在进度条<div>里，设置进度条，条纹状动画效果(Bootstrap)

<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:30%">30%</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:50%">50%</div>

</div>

三．媒体对象组件，论坛常用

媒体对象可以包含图片、视频或音频等媒体，以达到对象和文本组合显示的样式效果。

基本实例

media样式class类，写在<div>里，声明一个媒体对象div(Bootstrap)
media-left样式class类，写在<div>里，设置一个媒体对象里的媒体区域左边显示(Bootstrap)
media-object样式class类，写在<img>里，设置一个媒体样式(Bootstrap)
media-body样式class类，写在<div>里，声明一个媒体内容div(Bootstrap)
media-heading样式class类，写在<h1-h4>里，设置一个媒体内容标题样式(Bootstrap)

<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>

媒体对象在右边

media-right样式class类，写在<div>里，设置一个媒体对象里的媒体区域右边显示(Bootstrap)

<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>

媒体对象列表，也就是声明一个媒体对象列表然后嵌套媒体对象

media-list样式class类，写在<ul>里，声明一个媒体对象列表(Bootstrap)

<ul class="media-list">

    <li class="meida">

        <div class="media-left">

            <img src="img/small.png" alt="" class="media-object">

        </div>

        <div class="media-body">

            <h4 class="meida-heading">内容标题</h4>

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

            <div class="meida">

                <div class="media-left">

                    <img src="img/small.png" alt="" class="media-object">

                </div>

                <div class="media-body">

                    <h4 class="meida-heading">内容标题</h4>

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

                    <div class="meida">

                        <div class="media-left">

                            <img src="img/small.png" alt="" class="media-object">

                        </div>

                        <div class="media-body">

                            <h4 class="meida-heading">内容标题</h4>

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

                        </div>

                    </div>

                </div>

            </div>

            <div class="meida">

                <div class="media-left">

                    <img src="img/small.png" alt="" class="media-object">

                </div>

                <div class="media-body">

                    <h4 class="meida-heading">内容标题</h4>

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

                </div>

            </div>

        </div>

    </li>

    <li class="meida">

        <div class="media-left">

            <img src="img/small.png" alt="" class="media-object">

        </div>

        <div class="media-body">

            <h4 class="meida-heading">内容标题</h4>

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

        </div>

    </li>

</ul>

最新文章

  1. phpstorm 激活服务器
  2. bzoj 4066: 简单题
  3. Python基础4：数据类型：数字 字符串 日期
  4. 在js里面使用php语言
  5. 三：分布式事务一致性协议2pc和3pc
  6. css 行内元素和块级元素
  7. Java遍历Map、List、Array
  8. myeclipse中自己手动配置maven
  9. SharePoint RBS 安装（集成Office Web Apps）
  10. poj 3687 Labeling Balls（拓补排序）
  11. mysql case when then else end 的写法
  12. ceil()函数的应用-hdu1065
  13. Linux-nmon系统性能监控工具的使用及报表产出
  14. appium+python自动化42-微信公众号 (可能以后会遇到也遇到切换不了webview的问题 记录再此 还没试)
  15. JS原型继承与类的继承
  16. linux shell 脚本攻略学习9--rename命令详解
  17. ElementUI 按需引入坑爹的点记录
  18. Erasure Coding（纠删码）深入分析
  19. PAT乙级1017
  20. 【Java面试题】38 Collection 和 Collections的区别

热门文章

  1. 扩展JButton实现自己的图片按钮
  2. idea中git从码云克隆项目到本地
  3. virtualbox使用相关问题
  4. ffmpeg怎么样处理网络流
  5. k8s中的dns服务发现
  6. 初识 Swift编程语言（中文版)
  7. react 执行 yarn build 后 去除 .js.map 文件
  8. [Exception IOS 4] - could not build module &#39;foundation&#39;
  9. 08-hibernate注解-多对多单向外键关联
  10. 一个漂亮而强大的RecyclerView