前言：这篇文章就不写目录了，这篇是bootstrap css最后一篇文章，将对bootstrap中对图片的处理和一些辅助类的设计进行学习了解。
1.图片辅助类学习总结
2.示例代码 如下：
1
<!DOCTYPE html>
2
<html>
3
<head lang="en">
4
<meta charset="UTF-8">
5
<title>bootstrap图片以及辅助</title>
6
<link rel="stylesheet" href="css/bootstrap.min.css">
7
<script type="application/javascript" src="js/bootstrap.min.js">
8
9
</script>
10
<style type="text/css">
11
12
.bs-callout {
13
padding: 20px;
14
margin: 20px 0;
15
border: 1px solid #eee;
16
border-left-width: 5px;
17
border-radius: 3px;
18
}
19
20
.bs-callout-danger {
21
border-left-color: #ce4844;
22
}
23
</style>
24
</head>
25
<body style="margin: 40px">
26
27
<div class="panel panel-info" >
28
<div class="panel-heading">
29
图片
30
</div>
31
<div class="panel-body">
32
<div class="bs-callout bs-callout-danger">
33
<h4>响应式图片</h4>
34
</div>
35
<img src="img/img.jpg" class="img-responsive">
36
<div class="bs-callout bs-callout-danger">
37
<h4>图片形状</h4>
38
</div>
39
<img src="img/img.jpg" class="img-rounded">
40
<img src="img/img.jpg" class="img-circle">
41
<img src="img/img.jpg" class="img-thumbnail">
42
43
</div>
44
</div>
45
46
<div class="panel panel-info" ><!--style="background-color: lightgrey"-->
47
<div class="panel-heading">
48
辅助类
49
</div>
50
<div class="panel-body">
51
<div class="bs-callout bs-callout-danger">
52
<h4>情景文本颜色</h4>
53
</div>
54
<p class="text-muted">我想和你的恋爱</p>
55
<p class="text-info">你会在离我百米远的街道上</p>
56
<p class="text-danger">大喊我的名字</p>
57
<p class="text-primary">我会在离你三层高的楼梯旁</p>
58
<p class="text-success">猛地朝你追去</p>
59
<p class="text-warning">你我会在一家杂货店里相遇</p>
60
<p class="text-danger">买了成双的笔、成双的橡皮</p>
61
<p class="text-primary">还有成双的直尺和本子</p>
62
<p class="text-success">在接下来的日子里 </p>
63
<p class="text-warning">互相写画、互相修涂、互相约束</p>
64
<div class="bs-callout bs-callout-danger">
65
<h4>情景背景色</h4>
66
</div>
67
<p class="bg-primary">我想和你的恋爱</p>
68
<p class="bg-success">你会在离我百米远的街道上</p>
69
<p class="bg-info">大喊我的名字</p>
70
<p class="bg-warning">我会在离你三层高的楼梯旁</p>
71
<p class="bg-danger">猛地朝你追去</p>
72
<p class="bg-primary">你我会在一家杂货店里相遇</p>
73
<p class="bg-success">买了成双的笔、成双的橡皮</p>
74
<p class="bg-info">还有成双的直尺和本子</p>
75
<p class="bg-warning">在接下来的日子里 </p>
76
<p class="bg-danger">互相写画、互相修涂、互相约束</p>
77
78
<div>
79
<button type="button" aria-label="Close" class="close">
80
<span aria-hidden="true">×</span>
81
</button>
82
<div class="bs-callout bs-callout-danger">
83
<h4>关闭按钮</h4>
84
</div>
85
</div>
86
<div class="bs-callout bs-callout-danger">
87
<h4>三角符</h4>
88
</div>
89
<span class="caret"></span>
90
<div class="bs-callout bs-callout-danger">
91
<h4>快速浮动</h4>
92
</div>
93
<div>
94
95
<div style="width:48%;height: 40px;line-height: 40px;text-align: center" class="pull-left bg-danger">左边</div>
96
<div style="width:48%;height: 40px;line-height: 40px;text-align: center" class="pull-right bg-primary">右边</div>
97
</div>
98
<div class="clearfix"></div>
99
<div class="bs-callout bs-callout-danger">
100
<h4>清除浮动</h4>
101
</div>
102
<div style="width:100%;height: 40px;line-height: 40px;text-align: center" class="clearfix bg-warning">清除浮动</div>
103
104
<div class="bs-callout bs-callout-danger">
105
<h4>隐藏内容</h4>
106
</div>
107
<div class="show">show</div>
108
<div class="hidden">hidden</div>
109
<div class="sr-only">sr-only</div>
110
<div class="invisible">invisible</div>
111
</div>
112
<div class="bs-callout bs-callout-danger">
113
<h4>图片替换</h4>
114
</div>
115
<h1 class="text-hide">内容</h1>
116
</div>
117
118
</body>
119
</html>
3.代码效果截图：
别的就不多说了，都比较简单，跟着做一下示例有基本明白了。