Bootstrap组件学习笔记（一）——大纲、Glyphicons字体图标和下拉菜单
2024-04-12 04:09:24
目录：
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>
Bootstrap组件学习笔记（一）——大纲、Glyphicons字体图标和下拉菜单相关推荐
- layui学习笔记（五）关于layui按钮下拉菜单dropdown使用。研究dropdown数据提取、显示过长、样式显示问题。
前言 今天做后台文章列表的时候,添加了一个功能:给文章批量移动分类. 方法有很多,比如:选择多条文章-按钮弹窗-下拉菜单select-选择分类-提交.也可以选择多条文章-直接下拉菜单select-选择 ...
- 鼠标点击出现下拉菜单html,Bootstrap导航条可点击和鼠标悬停显示下拉菜单
使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链 ...
- 暑期学习日记32：导航栏和导航下拉菜单
今天学习了用HTML+CSS制作导航栏和下拉菜单.代码如下: <!doctype html> <html> <head> <meta charset=&quo ...
- Uncaught TypeError: Bootstrap dropdown require Popper.js (https://popper.js.org)（下拉菜单）
报错内容: 在做网页设计的时候,使用Bootstrap框架的下拉菜单,在谷歌浏览器中打开html进行测试的时候发现点击下拉菜单无反应的问题,打开F12,报错内容如下所示: 前端代码展示 <!DO ...
- 前端学习（1002）：简洁版滑动下拉菜单问题解决
快速滑动 不停切换 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
- Bootstrap图标、下拉菜单、按钮组、按钮式下拉菜单
1.图标使用 <span class="glyphicon glyphicon-search" aria-hidden="true"></sp ...
- Bootstrap引用Glyphicons 字体图标
Bootstrap 自带了大量可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 引用方法: 在页面空白处单击鼠标右键,选择"检查" 选择你喜欢的图标,将鼠标落 ...
- 使用vue来开发一个下拉菜单组件(2)
二.组件设计 接下来是开发选择框组件,首先需要自定义一个点击外部使下拉菜单关闭的指令: export default {bind(el, binding, vnode) {function docum ...
- 小程序下拉菜单组件(含多层筛选)
图例中筛选是另外一个组件 一般在筛选的场景中需要使用下拉菜单,动态设置筛选条件,比如淘宝,京东的产品筛选列表,携程的旅游目的地的筛选列表. 支持 配置化设置弹层内容 支持动态刷新弹层内容 支持动态修改 ...
最新文章
- 大数据，正在到来的数据革命——涂子沛
- 潜意识微笑，与钱无关——博客获奖有感
- crack笔记1 常用脱壳方法
- 【学术】60%学者反映实验无法复现？Nature给出五招！
- .NET 缓存的设计
- RocketMQ错误消息重试策略之Consumer的重试机制（Exception情况）
- 小师妹学JavaIO之:用Selector来发好人卡
- Apache Derby数据库用户和权限
- PHP笔记-自定义MVC框架
- 最近见了几位东半球的顶级技术大拿
- SAP License：发票校验抬头税码选择清单
- jdbc数据库连接池连接
- 总结之Unix的基础知识
- 好用又好玩的PC端特效
- 智能体脂称方案（包含原理图+PCB+BOM表，供大家学习）
- html动画人物走路,CSS3动画中的steps(),制作人物行走动画
- Nolan最新版本2.4 Windows和docker安装升级教程， 登陆修复.排除个别需要实名的账号，nvjdc对接青龙面板教程
- java安卓字体_Android中添加外部字体库和竖直排列字体
- 基于AT91SAM9G20构建嵌入式Linux系统
- HiBit Uninstaller（电脑软件强力卸载工具）官方中文版V2.6.20 | hibituninstaller怎么样? | 电脑软件卸载不干净怎么办？