Bootstrap组件学习笔记（一）——大纲、Glyphicons字体图标和下拉菜单
目录：
1.组件学习大纲
2.Glyphicons字体图标
3.下拉菜单
1.组件学习大纲
2.Glyphicons字体图标
bootstrap含有接近250多个字体图标（图标表格地址：http://v3.bootcss.com/components/#glyphicons），我们下载bootstrap编译好的源文件时字体保存在fonts文件夹下面,这里需要注意的是在我们引入这些图标时，要保证他的路径为../fonts/否则需要我们更改文件源码中的资源路径，接下来依然是使用示例。
2.1 示例代码
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
</head>
13
<body style="margin: 40px">
14
15
<div class="panel panel-success">
16
17
<div class="panel-heading">
18
glyphicon图标
19
</div>
20
<div class="panel-body">
21
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
22
<hr/>
23
24
<div class="btn-group">
25
26
<button type="button" class="btn btn-success" aria-label="pre">
27
<span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span>
28
</button>
29
<button type="button" class="btn btn-success" aria-label="stop">
30
<span class="glyphicon glyphicon-stop" aria-hidden="true"></span>
31
</button>
32
<button type="button" class="btn btn-success" aria-label="next">
33
<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
34
</button>
35
</div>
36
<hr/>
37
38
<!--注意文本和span图标之间建议有空格，这样渲染的时候图片和文本之间会有间隔，比较美观-->
39
<button type="button" class="btn btn-warning btn-lg" aria-label="send">
40
<span class="glyphicon glyphicon-send" aria-hidden="true"></span> send
41
</button>
42
43
<button type="button" class="btn btn-warning btn-sm" aria-label="send">
44
<span class="glyphicon glyphicon-send" aria-hidden="true"></span> send
45
</button>
46
47
<button type="button" class="btn btn-warning btn-xs" aria-label="send">
48
<span class="glyphicon glyphicon-send" aria-hidden="true"></span> send
49
</button>
50
</div>
51
</div>
52
</body>
53
</html>
2.2 示例效果截图
3.下拉菜单
3.1 下拉菜单的示例截图
3.2 下拉菜单示例代码
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
<style type="text/css">
13
.dropup {
14
margin-top: 10px;
15
}
16
.dropdown{
17
18
margin-top: 10px;
19
}
20
21
.btn-group-demo{
22
margin-top:10px;
23
}
24
</style>
25
</head>
26
<body style="margin: 40px">
27
28
<div class="panel panel-success">
29
30
<div class="panel-heading">
31
glyphicon图标
32
</div>
33
<div class="panel-body">
34
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
35
<hr/>
36
37
<div class="btn-group">
38
39
<button type="button" class="btn btn-success" aria-label="pre">
40
<span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span>
41
</button>
42
<button type="button" class="btn btn-success" aria-label="stop">
43
<span class="glyphicon glyphicon-stop" aria-hidden="true"></span>
44
</button>
45
<button type="button" class="btn btn-success" aria-label="next">
46
<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
47
</button>
48
</div>
49
<hr/>
50
51
<!--注意文本和span图标之间建议有空格，这样图片和文本自检会有间隔，比较美观-->
52
<button type="button" class="btn btn-warning btn-lg" aria-label="send">
53
<span class="glyphicon glyphicon-send" aria-hidden="true"></span> send
54
</button>
55
56
<button type="button" class="btn btn-warning btn-sm" aria-label="send">
57
<span class="glyphicon glyphicon-send" aria-hidden="true"></span> send
58
</button>
59
60
<button type="button" class="btn btn-warning btn-xs" aria-label="send">
61
<span class="glyphicon glyphicon-send" aria-hidden="true"></span> send
62
</button>
63
</div>
64
</div>
65
66
<div class="panel panel-warning">
67
68
<div class="panel-heading">
69
下拉菜单
70
</div>
71
<div class="panel-body">
72
73
<!--
74
aria-haspopup\aria-expanded:都是无障碍网页属性
75
-->
76
<div class="dropdown">
77
<button class="btn btn-default dropdown-toggle" type="button"
78
id="drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
79
下拉菜单(下弹)
80
<span class="caret"></span>
81
</button>
82
83
<ul class="dropdown-menu" aria-labelledby="drop">
84
<li><a href="http://www.baidu.com">baidu</a> </li>
85
<li><a href="http://www.baidu.com">baidu</a> </li>
86
<li><a target="_blank" href="http://www.baidu.com">baidu</a> </li>
87
<li><a href="http://www.baidu.com">baidu</a> </li>
88
</ul>
89
</div>
90
91
<div class="dropup">
92
<button class="btn btn-default dropdown-toggle" type="button"
93
id="dropup" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
94
下拉菜单(上弹)
95
<span class="caret"></span>
96
</button>
97
98
<ul class="dropdown-menu" aria-labelledby="dropup">
99
<li><a href="http://www.baidu.com">baidu</a> </li>
100
<li><a href="http://www.baidu.com">baidu</a> </li>
101
<li><a target="_blank" href="http://www.baidu.com">baidu</a> </li>
102
<li><a href="http://www.baidu.com">baidu</a> </li>
103
</ul>
104
</div>
105
<div class="dropdown">
106
<button class="btn btn-default dropdown-toggle" type="button"
107
id="dropleft" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
108
下拉菜单(左对齐)
109
<span class="caret"></span>
110
</button>
111
112
<ul class="dropdown-menu dropdown-menu-left" aria-labelledby="dropupleft">
113
<li><a href="http://www.baidu.com">baidu</a> </li>
114
<li><a href="http://www.baidu.com">baidu</a> </li>
115
<li><a target="_blank" href="http://www.baidu.com">baidu</a> </li>
116
<li><a href="http://www.baidu.com">baidu</a> </li>
117
</ul>
118
</div>
119
<div class="dropdown">
120
<button class="btn btn-default dropdown-toggle" type="button"
121
id="dropright" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
122
下拉菜单(右对齐)
123
<span class="caret"></span>
124
</button>
125
126
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropupright">
127
<li><a href="http://www.baidu.com">baidu</a> </li>
128
<li><a href="http://www.baidu.com">baidu</a> </li>
129
<li><a target="_blank" href="http://www.baidu.com">baidu</a> </li>
130
<li><a href="http://www.baidu.com">baidu</a> </li>
131
</ul>
132
</div>
133
134
<div class="dropdown">
135
<button class="btn btn-default dropdown-toggle" type="button"
136
id="drop-title" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
137
下拉菜单(标题)
138
<span class="caret"></span>
139
</button>
140
141
<ul class="dropdown-menu" aria-labelledby="dropup-title">
142
<li class="dropdown-header">标题一</li>
143
<li><a href="http://www.baidu.com">baidu</a> </li>
144
<li><a href="http://www.baidu.com">baidu</a> </li>
145
<li class="dropdown-header">标题二</li>
146
<li><a target="_blank" href="http://www.baidu.com">baidu</a> </li>
147
<li><a href="http://www.baidu.com">baidu</a> </li>
148
</ul>
149
</div>
150
151
<div class="dropdown">
152
<button class="btn btn-default dropdown-toggle" type="button"
153
id="drop-line" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
154
下拉菜单(分割线)
155
<span class="caret"></span>
156
</button>
157
158
<ul class="dropdown-menu" aria-labelledby="dropup-line">
159
<li class="dropdown-header">标题一</li>
160
<li><a href="http://www.baidu.com">baidu</a> </li>
161
<li><a href="http://www.baidu.com">baidu</a> </li>
162
<li role="separator" class="divider"></li>
163
<li class="dropdown-header">标题二</li>
164
<li><a target="_blank" href="http://www.baidu.com">baidu</a> </li>
165
<li><a href="http://www.baidu.com">baidu</a> </li>
166
</ul>
167
</div>
168
169
<div class="dropup">
170
<button class="btn btn-default dropdown-toggle" type="button"
171
id="drop-disabled" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
172
下拉菜单(禁用)
173
<span class="caret"></span>
174
</button>
175
176
<ul class="dropdown-menu" aria-labelledby="dropup-disabled">
177
<li class="disabled"><a href="http://www.baidu.com">baidu</a> </li>
178
<li><a href="http://www.baidu.com">baidu</a> </li>
179
</ul>
180
</div>
181
182
<div class="btn-group-demo">
183
<div class="btn-group">
184
<button class="btn btn-primary dropdown-toggle" type="button"
185
id="drop-btn-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
186
简单单选按钮
187
<span class="caret"></span>
188
</button>
189
190
191
<ul class="dropdown-menu" aria-labelledby="drop-btn-primary">
192
<li class="disabled"><a href="http://www.baidu.com">baidu</a> </li>
193
<li><a href="http://www.baidu.com">baidu</a> </li>
194
<li><a href="http://www.baidu.com">baidu</a> </li>
195
<li><a href="http://www.baidu.com">baidu</a> </li>
196
</ul>
197
</div>
198
199
<div class="btn-group">
200
<button class="btn btn-success dropdown-toggle" type="button"
201
id="drop-btn-success" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
202
简单单选按钮
203
<span class="caret"></span>
204
</button>
205
206
<ul class="dropdown-menu" aria-labelledby="drop-btn-success">
207
<li class="disabled"><a href="http://www.baidu.com">baidu</a> </li>
208
<li><a href="http://www.baidu.com">baidu</a> </li>
209
<li><a href="http://www.baidu.com">baidu</a> </li>
210
<li><a href="http://www.baidu.com">baidu</a> </li>
211
</ul>
212
</div>
213
214
<div class="btn-group">
215
<button class="btn btn-warning dropdown-toggle" type="button"
216
id="drop-btn-warning" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
217
简单单选按钮
218
<span class="caret"></span>
219
</button>
220
221
<ul class="dropdown-menu" aria-labelledby="drop-btn-warning">
222
<li class="disabled"><a href="http://www.baidu.com">baidu</a> </li>
223
<li><a href="http://www.baidu.com">baidu</a> </li>
224
<li><a href="http://www.baidu.com">baidu</a> </li>
225
<li><a href="http://www.baidu.com">baidu</a> </li>
226
</ul>
227
</div>
228
</div>
229
230
<div class="btn-group-demo">
231
232
233
<div class="btn-group">
234
<button class="btn btn-primary" type="button">分列式按钮菜单</button>
235
<button class="btn btn-primary dropdown-toggle" type="button"
236
id="drop-btn-split-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
237
<span class="caret"></span>
238
<span class="sr-only">Toggle Dropdown</span>
239
</button>
240
241
242
<ul class="dropdown-menu" aria-labelledby="drop-btn-split-primary">
243
<li class="disabled"><a href="http://www.baidu.com">baidu</a> </li>
244
<li><a href="http://www.baidu.com">baidu</a> </li>
245
<li><a href="http://www.baidu.com">baidu</a> </li>
246
<li><a href="http://www.baidu.com">baidu</a> </li>
247
</ul>
248
</div>
249
250
<div class="btn-group">
251
<button class="btn btn-success" type="button">分列式按钮菜单</button>
252
<button class="btn btn-success dropdown-toggle" type="button"
253
id="drop-btn-split-success" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
254
<span class="caret"></span>
255
<span class="sr-only">Toggle Dropdown</span>
256
</button>
257
258
<ul class="dropdown-menu" aria-labelledby="drop-btn-split-success">
259
<li class="disabled"><a href="http://www.baidu.com">baidu</a> </li>
260
<li><a href="http://www.baidu.com">baidu</a> </li>
261
<li><a href="http://www.baidu.com">baidu</a> </li>
262
<li><a href="http://www.baidu.com">baidu</a> </li>
263
</ul>
264
</div>
265
266
<div class="btn-group">
267
<button class="btn btn-warning" type="button">分列式按钮菜单</button>
268
<button class="btn btn-warning dropdown-toggle" type="button"
269
id="drop-btn-split-warning" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
270
<span class="caret"></span>
271
<span class="sr-only">Toggle Dropdown</span>
272
</button>
273
274
<ul class="dropdown-menu" aria-labelledby="drop-btn-split-warning">
275
<li class="disabled"><a href="http://www.baidu.com">baidu</a> </li>
276
<li><a href="http://www.baidu.com">baidu</a> </li>
277
<li><a href="http://www.baidu.com">baidu</a> </li>
278
<li><a href="http://www.baidu.com">baidu</a> </li>
279
</ul>
280
</div>
281
</div>
282
</div>
283
</div>
284
</body>
285
</html>