学习要点:

1.Well 组件
2.进度条组件
3.媒体对象组件

主讲教师:李炎恢

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

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

<div class="well">
Bootstrap
</div>

//有 lg 和 sm 两种可选值

<div class="well well-lg">
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+支持

<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-stripedactive" 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="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="img/small.png" alt="" class="media-object">
</div>
</div>

//媒体对象列表

<ul class="media-list">
<li class="media">
//将每个 media 存放在 media-body 内后即可
...代码较多,具体看视频
</li>
</ul>

第 11 章 进度条媒体对象和 Well 组件的更多相关文章

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

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

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

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

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

    一.Well 组件这个组件可以实现简单的嵌入效果. <!-- //嵌入效果 --> <div class="well">Bootstrap</div& ...

  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. atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

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

  8. 如何在UIAlertView中显示进度条

    今天这个问题是,在一个iPhone程序中,我要在后台做大量的数据处理,希望在界面上显示一个进度条(Progress Bar)使得用户了解处理进度.这个进度条应该是在一个模态的窗口中,使界 今天这个问题 ...

  9. python 之 time模块、datetime模块(打印进度条)

    6.9 time 模块 方法 含义 备注 time.time() 时间戳 1561013092.997079 time.strftime('%Y-%m-%d %H:%M:%S %p') 结构化时间st ...

随机推荐

  1. ServletConfig对象详解

    在Servlet 的配置文件中,可以用一个或多个<init-param>标签为servlet配置一些初始化参数. 当servlet配置了初始化参数之后,web容器在创建servlet实例对 ...

  2. Java 集合 — HashMap

    HashMap 无序(每次resize的时候都会变) 非线程安全 key和value都看可以为null 使用数组和链表实现 查找元素的时候速度快 几个重要属性: loadFactor:用来计算thre ...

  3. 强制SQL Server执行计划使用并行提升在复杂查询语句下的性能

        最近在给一个客户做调优的时候发现一个很有意思的现象,对于一个复杂查询(涉及12个表)建立必要的索引后,语句使用的IO急剧下降,但执行时间不降反升,由原来的8秒升到20秒.     通过观察执行 ...

  4. JS 关于(function( window, undefined ) {})(window)写法的理解

    JS 关于(function( window, undefined ) {})(window)写法的理解 [网络整理] (function( window, undefined ) {})(windo ...

  5. 基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化

    在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进 ...

  6. 拓扑排序(二)之 C++详解

    本章是通过C++实现拓扑排序. 目录 1. 拓扑排序介绍 2. 拓扑排序的算法图解 3. 拓扑排序的代码说明 4. 拓扑排序的完整源码和测试程序 转载请注明出处:http://www.cnblogs. ...

  7. Yii的学习(3)--查询生成器 (Query Builder)

    原文地址:http://www.yiiframework.com/doc/guide/1.1/en/database.query-builder 不过原文是英文的,Yii的官网没有翻译这一章,自己就尝 ...

  8. MAC下安装与配置MySQL

    MAC下安装与配置MySQL   MAC下安装与配置MySQL 一 下载MySQL 访问MySQL的官网http://www.mysql.com/downloads/ 然后在页面中会看到“MySQL ...

  9. Unity3D协同程序(Coroutine)

    摘要下: 1. coroutine, 中文翻译"协程".这个概念可能有点冷门,不过百度之,说是一种很古老的编程模型了,以前的操作系统里进程调度里用到过,现在操作系统的进程调度都是根 ...

  10. [python 译] 基于面向对象的分析和设计

    [python 译] 基于面向对象的分析和设计 // */ // ]]>   [python 译] 基于面向对象的分析和设计 Table of Contents 1 原文地址 2 引言 2.1 ...