目錄： 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>