学习要点:

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. Atitit cnchar simp best list  汉字简化方案 最简化汉字256个

    Atitit cnchar simp best list  汉字简化方案 最简化汉字256个 1.1. 最简化发音1 1.2. 根据笔画密度,删除了密度高的字..1 1.3. 使用同发音的英文字母等代 ...

  2. mysql 的简单优化

    合理的建立索引的建议: (1)  越小的数据类型通常更好:越小的数据类型通常在磁盘.内存和CPU缓存中都需要更少的空间,处理起来更快. (2)  简单的数据类型更好:整型数据比起字符,处理开销更小,因 ...

  3. draggable属性设置元素是否可拖动。

    设置标签属性draggable="true"将一个标签内的元素拖动到另外一个标签进行显示: <!DOCTYPE HTML> <html> <head& ...

  4. Android 实现应用升级方案(暨第三方自动升级服务无法使用后的解决方案)

    第三方推送升级服务不再靠谱: 以前在做Android开发的时候,在应用升级方面都是使用的第三方推送升级服务,但是目前因为一些非技术性的问题,一些第三方厂商不再提供自动升级服务,比如友盟,那么当第三方推 ...

  5. ServletConfig接口默认是哪里实现的?

    问题:Servlet接口默认是哪里实现的? 答:GenericServlet 1.结构 2.ServletConfig.GenericServlet.HttpServlet的关系如下: public ...

  6. 领会CSS,实际中的研究

    虽懂却不会,真是可怕,自认懂却了无. 善用CSS属性选择器 在用于区别和唯一的情况下完全可以使用属性选择器,而没有必要使用class或id p[city="http://www.css.co ...

  7. hdu4751Divide Groups(dfs枚举完全图集合或者bfs染色)

    /************************************************************************* > File Name: j.cpp > ...

  8. MemCache分布式缓存的一个bug

    Memcached分布式缓存策略不是由服务器端至支持的,多台服务器之间并不知道彼此的存在.分布式的实现是由客户端代码(Memcached.ClientLibrary)通过缓存key-server映射来 ...

  9. [转载]SVN使用教程

    SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生成很多不同的版本,这就需要程序员有效的管理代码,在需要的时候可以迅速,准确取出相应的版本. Subversion是什么? ...

  10. PHP实现简易blog

    最近,有时间看了点PHP的代码.参考PHP100教程做了简单的blog,网易云课堂2012年的教程,需要的可以找一下,这里面简单的记录一下. 首先是集成环境,这里选用的WAMP:http://www. ...