Bootstrap组件学习笔记（六）——进度条和媒体对象
目录：
1.进度条
2.媒体对象
1.进度条
1.1 总结
1.2 示例效果图
1.3 示例代码
1
<!DOCTYPE html>
2
<html>
3
<head lang="en">
4
<meta charset="UTF-8">
5
<title>组件</title>
6
<!--引入bootstrap样式文件-->
7
<link href="css/bootstrap.min.css" rel="stylesheet">
8
<!--引入jq（必须在bootstrap.min.js文件之前）-->
9
<script type="application/javascript" src="js/jquery-3.2.0.js"></script>
10
<!--引入bootstrap js-->
11
<script type="application/javascript" src="js/bootstrap.min.js"></script>
12
13
</head>
14
<body style="margin: 60px">
15
16
<div class="panel panel-warning">
17
<div class="panel-heading">
18
进度条
19
</div>
20
<div class="panel-body">
21
22
<h5>基本进度条</h5><hr/>
23
<div class="progress">
24
<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"
25
style="width: 50%;">
26
<span class="sr-only">50% progress</span>
27
</div>
28
</div>
29
30
<h5>带进度指示标签的进度条</h5><hr/>
31
<div class="progress">
32
<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"
33
style="width: 50%;">
34
50%
35
</div>
36
</div>
37
38
<h5>很低百分比的进度条(min-width设置提示文本清晰可见)</h5><hr/>
39
<div class="progress">
40
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100"
41
style="min-width: 2em;width: 2%;">
42
2%
43
</div>
44
</div>
45
46
<h5>情境(颜色)进度条</h5><hr/>
47
<div class="progress">
48
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
49
style="min-width: 2em;width: 20%;">
50
20%
51
</div>
52
</div>
53
54
<div class="progress">
55
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
56
style="min-width: 2em;width: 20%;">
57
20%
58
</div>
59
</div>
60
61
<div class="progress">
62
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
63
style="min-width: 2em;width: 20%;">
64
20%
65
</div>
66
</div>
67
68
<div class="progress">
69
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
70
style="min-width: 2em;width: 20%;">
71
20%
72
</div>
73
</div>
74
75
<h5>进度条条纹效果</h5><hr/>
76
<div class="progress">
77
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
78
style="min-width: 2em;width: 20%;">
79
20%
80
</div>
81
</div>
82
83
<h5>进度条动画效果</h5><hr/>
84
<div class="progress">
85
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
86
<span class="sr-only">45% Complete</span>
87
</div>
88
</div>
89
90
<h5>进度条堆叠效果</h5><hr/>
91
<div class="progress">
92
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
93
<span class="sr-only">30% Complete</span>
94
</div>
95
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
96
<span class="sr-only">40% Complete</span>
97
</div>
98
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
99
<span class="sr-only">20% Complete</span>
100
</div>
101
</div>
102
</div>
103
</div>
104
</body>
105
</html>
2.媒体对象
2.1 总结
2.2 示例效果
2.3 示例代码
1
<!DOCTYPE html>
2
<html>
3
<head lang="en">
4
<meta charset="UTF-8">
5
<title>组件</title>
6
<!--引入bootstrap样式文件-->
7
<link href="css/bootstrap.min.css" rel="stylesheet">
8
<!--引入jq（必须在bootstrap.min.js文件之前）-->
9
<script type="application/javascript" src="js/jquery-3.2.0.js"></script>
10
<!--引入bootstrap js-->
11
<script type="application/javascript" src="js/bootstrap.min.js"></script>
12
13
</head>
14
<body style="margin: 60px">
15
16
<div class="panel panel-warning">
17
<div class="panel-heading">
18
媒体对象
19
</div>
20
<div class="panel-body">
21
22
<h4>media-left/media-right</h4>
23
<div class="media">
24
<div class="media-left">
25
<a href="#">
26
<img class="media-object" style="width: 64px;" src="img/img.jpg">
27
</a>
28
</div>
29
<div class="media-body">
30
<div class="media-heading">《江城子》</div>
31
<p>十年生死两茫茫。
32
不思量， 自难忘。
33
千里孤坟， 无处话凄凉。
34
纵使相逢应不识，
35
尘满面， 鬓如霜。</p>
36
<p>夜来幽梦忽还乡。
37
小轩窗， 正梳妆。
38
相顾无言， 惟有泪千行。
39
料得年年断肠处，
40
明月夜， 短松冈。</p>
41
</div>
42
</div>
43
44
<div class="media">
45
<div class="media-body">
46
<div class="media-heading">《江城子》</div>
47
<p>十年生死两茫茫。
48
不思量， 自难忘。
49
千里孤坟， 无处话凄凉。
50
纵使相逢应不识，
51
尘满面， 鬓如霜。</p>
52
<p>夜来幽梦忽还乡。
53
小轩窗， 正梳妆。
54
相顾无言， 惟有泪千行。
55
料得年年断肠处，
56
明月夜， 短松冈。</p>
57
</div>
58
<div class="media-right">
59
<a href="#">
60
<img class="media-object" style="width: 64px;" src="img/img.jpg">
61
</a>
62
</div>
63
</div>
64
<hr/>
65
66
<h4>media/media-bottom/media-middle</h4>
67
<div class="media">
68
<div class="media-left">
69
<a href="#">
70
<img class="media-object" style="width: 64px;" src="img/img.jpg">
71
</a>
72
</div>
73
<div class="media-body">
74
<div class="media-heading">没得名字</div>
75
<p>我不愿用空洞的赞美
76
<br>象诗人不该把颂词都献给春天的花
77
<br>我只愿用深沉的我塑我深沉的心
78
<br>把这爱严严实实的藏着给你
79
<br>如果你是朵雪花
80
<br>我真愿四季的花都凋谢
81
<br>让我孤零零的守候着你
82
</p>
83
</div>
84
</div>
85
86
<div class="media">
87
<div class="media-left media-middle">
88
<a href="#">
89
<img class="media-object" style="width: 64px;" src="img/img.jpg">
90
</a>
91
</div>
92
<div class="media-body">
93
<div class="media-heading">没得名字</div>
94
<p>我不愿用空洞的赞美
95
<br>象诗人不该把颂词都献给春天的花
96
<br>我只愿用深沉的我塑我深沉的心
97
<br>把这爱严严实实的藏着给你
98
<br>如果你是朵雪花
99
<br>我真愿四季的花都凋谢
100
<br>让我孤零零的守候着你
101
</p>
102
</div>
103
</div>
104
105
<div class="media">
106
<div class="media-left media-bottom">
107
<a href="#">
108
<img class="media-object" style="width: 64px;" src="img/img.jpg">
109
</a>
110
</div>
111
<div class="media-body">
112
<div class="media-heading">没得名字</div>
113
<p>我不愿用空洞的赞美
114
<br>象诗人不该把颂词都献给春天的花
115
<br>我只愿用深沉的我塑我深沉的心
116
<br>把这爱严严实实的藏着给你
117
<br>如果你是朵雪花
118
<br>我真愿四季的花都凋谢
119
<br>让我孤零零的守候着你
120
</p>
121
</div>
122
<hr/>
123
124
<h4>media-list</h4>
125
<ul class="media-list">
126
<li class="media">
127
<div class="media-left">
128
<a href="#">
129
<img class="media-object" src="img/img.jpg" style="width: 64px; height: 64px;">
130
</a>
131
</div>
132
<div class="media-body">
133
134
<h4 class="media-heading">小哥哥</h4>
135
<p>空间秀儿子刚出生的照片，儿子.jpg 儿子.jpg 儿子.jpg 儿子.jpg 儿子.jpg
136
<div class="media">
137
<div class="media-left">
138
<a href="#">
139
<img class="media-object" src="img/img.jpg" style="width: 64px; height: 64px;">
140
</a>
141
</div>
142
143
<div class="media-body">
144
<h4 class="media-heading">隔壁那什么</h4>
145
看到你儿子长的一点都不像我。那我就放心了。
146
<div class="media">
147
<div class="media-left">
148
<a href="#">
149
<img class="media-object" src="img/img.jpg" style="width: 64px; height: 64px;">
150
</a>
151
</div>
152
<div class="media-body">
153
<h4 class="media-heading">吃瓜群众</h4>
154
......hahahaahhaahhahahahhahahahaah
155
</div>
156
</div>
157
</div>
158
</div>
159
</div>
160
</li>
161
</ul>
162
</div>
163
</div>
164
</div>
165
</div>
166
</body>
167
</html>
相关推荐
- Bootstrap组件学习笔记（一）——大纲、Glyphicons字体图标和下拉菜单
- Bootstrap组件学习笔记（八）——具有响应式的嵌入内容和well
- Bootstrap组件学习笔记（四）——分页和翻页
- Bootstrap(10) 进度条媒体对象和 Well 组件
- Bootstrap组件学习笔记（六）——进度条和媒体对象
- 进度条媒体对象和Well组件
- Bootstrap组件学习笔记（六）——页头、缩略图和警告框
- Bootstrap学习笔记之进度条、媒体对象实例详解
- Bootstrap 进度条媒体对象和 Well 组件
- Scala2.11.7学习笔记(六）类和对象
- springboot配置对jsp页面的解析支持
- 编写前台页面代码