(十)进度条媒体对象和 Well 组件
一.Well 组件
- 有 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-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:45%">45%</div>
</div>
三.媒体对象组件
媒体对象可以包含图片、视频或音频等媒体,以达到对象和文本组合显示的样式效果。
1、基本实例
<div class="media">
<div class="media-left"><img src="<%=path%>/img/small.png" alt="" class="media-object"></div>
<div class="media-body"><h4 class="media-heading">标题</h4>
<p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老 的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17
种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔; 脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状;
羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个 种的主要区别在于头部色型和个体大小。</p></div>
</div>
2、媒体对象在右边
<div class="media">
<div class="media-body"><h4 class="media-heading">标题</h4>
<p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老 的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17
种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔; 脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状;
羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个 种的主要区别在于头部色型和个体大小。</p></div>
<div class="media-right"><img src="<%=path%>img/small.png" alt="" class="media-object"></div>
</div>
3、模仿帖子回复功能
<div class="media">
<div class="media-left"><img src="<%=path%>/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="<%=path%>/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="<%=path%>/img/small.png" alt="" class="media-object"></div>
<div class="media-body"><h4 class="media-heading">标题</h4>
<p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老 的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17 种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔; 脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状; 羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个 种的主要区别在于头部色型和个体大小。</p></div>
</div>
</div>
</div>
<div class="media">
<div class="media-left"><img src="<%=path%>/img/small.png" alt="" class="media-object"></div>
<div class="media-body"><h4 class="media-heading">标题</h4>
<p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老 的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17 种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔; 脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状; 羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个 种的主要区别在于头部色型和个体大小。</p>
</div>
</div>
</div> </div>
(十)进度条媒体对象和 Well 组件的更多相关文章
- 第二百四十一节,Bootstrap进度条媒体对象和 Well 组件
第二百四十一节,Bootstrap进度条媒体对象和 Well 组件 学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件 本节课我们主要学习一下 Bootstrap 的三个组件功能:Wel ...
- 第 11 章 进度条媒体对象和 Well 组件
学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件 主讲教师:李炎恢 本节课我们主要学习一下 Bootstrap 的三个组件功能:Well 组件.进度条组件.媒体对象组件. 一.Well ...
- Bootstrap 进度条媒体对象和 Well 组件
一.Well 组件 这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 lg 和 ...
- Bootstrap(10) 进度条媒体对象和 Well 组件
一.Well 组件这个组件可以实现简单的嵌入效果. <!-- //嵌入效果 --> <div class="well">Bootstrap</div& ...
- Bootstrap 学习笔记5 进度条媒体对象和well组件
代码: <ul class="media-list"> <li class="media"> <div class="m ...
- Bootstrap 进度条媒体对象和条组
列表组组件 列表组组件用于显示一组列表的组件. //基本实例 <ul class="list-group"> <li class="list-group ...
- atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7
atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...
- Android 进度条(ProgressBar)和拖动条(Seekbar)补充“自定义组件”(总结)
这周结束了,我也码了一周的字,感觉还是很有种脚踏实地的感觉的,有时间就可以看看自己的总结再查漏补缺,一步一个脚印,做出自己最理想的项目. 今天我们讲两点: 1.ProgressBar: 其实前面也稍微 ...
- springboot带有进度条的上传
一.说明 最近要做文件上传,在网上找了很久都没有一个全面的示例,特此记录下来分享给大家. 1.文件上传接口可按照springboot默认实现,也可用commons-fileupload组件,本示例使用 ...
随机推荐
- Java编译器的优化
public class Notice { public static void main(String[] args) { // 右侧20是一个int类型,但没有超过左侧数值范围,就是正确的 // ...
- AJAX的具体使用
一.GET请求 ①GET请求传递参数通常使用的是问号传参,即在请求地址上加上?参数,从而传递数据到服务端 ②一般在GET请求数据时,无需设置响应体,可以传null或者干脆不传 ③一般情况下URL传递的 ...
- C语言利用fgetc复制拷贝文件内容
#include <stdio.h> #include <stdlib.h> //文件的内容复制 int main(int a,char *argv[]){ if(a!=3){ ...
- codevs:1313 质因数分解:已知正整数 n是两个不同的质数的乘积,试求出较大的那个质数 。
#include<iostream>#include<cstdio>#include<cmath>using namespace std;int a[2];int ...
- GSS1 A - Can you answer these queries I
//题意:询问一段区间的最大子序列的值. //做法:维护四个值:包含当前区间左端点的最大子区间LM,包含当前区间右端点的最大子区间RM.当前区间的最大子区间M, 当前区间的区间和S //tree[ro ...
- ArcGIS分支版本化( Branch Versioning )技术介绍
概述 分支版本化技术是有别于传统的SDE版本化技术,它用于支持WebGIS模式下的多用户长事务编辑. 优势功能 使用分支版本化技术将获得以下功能 1. 支持长事务的编辑. 2. 支持Undo和Redo ...
- CODE FESTIVAL 2017 qual C 题解
传送门 \(A\) 咕咕 const int N=15; char s[N];int n; int main(){ scanf("%s",s+1),n=strlen(s+1); f ...
- svn服务备份与还原
1.dump备份方式: svnadmin dump /data/svn/xxxx > /data/beifen/`date +/%Y%m%d`.bak xxxx:项目名称(项目库) 将xxxx这 ...
- 深入理解volatile原理与使用
volatile:称之为轻量级锁,被volatile修饰的变量,在线程之间是可见的. 可见:一个线程修改了这个变量的值,在另一个线程中能够读取到这个修改后的值. synchronized除了线程之间互 ...
- 数据结构Java版之广度优先图(十三)
广度优先,则是用的队列,将每一层的节点先存入队列中去,后依次取出队列中的节点,显示与当前节点存在边,但是未被访问过的节点,也就是下一层与之相联系的节点,再将这些节点存入队列.经过层层迭代,就可以完全遍 ...