学习笔记（六）——进度条和媒体对象"/>
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 儿子.jpg136
<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
......hahahaahhaahhahahahhahahahaah155
</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组件学习笔记（六）——进度条和媒体对象
发布评论