目录 1.按钮组 2.输入框组1.按钮组 1.1 总结 1.2 示例代码1html>2html>3head lang="en">4 meta charset="UTF-8">5 title>组件title>6 7 link href="css/bootstr
目录
1.按钮组
2.输入框组
1.按钮组
1.1 总结
1.2 示例代码
1
</html><!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
<div class="panel-heading">
30
普通按钮组
31
</div>
32
<div class="panel-body">
33
<div class="btn-group" role="group" aria-label="btn-group">
34
<button type="button" class="btn btn-success">left</button>
35
<button type="button" class="btn btn-success">middle</button>
36
<button type="button" class="btn btn-success">right</button>
37
</div>
38
39
</div>
40
41
</div>
42
43
<div class="panel panel-warning">
44
<div class="panel-heading">
45
按钮工具栏
46
</div>
47
<div class="panel-body">
48
<div class="btn-toolbar">
49
<div class="btn-group" role="group" aria-label="btn-group">
50
<button type="button" class="btn btn-warning">tool1</button>
51
<button type="button" class="btn btn-warning">tool2</button>
52
<button type="button" class="btn btn-warning">tool3</button>
53
</div>
54
<div class="btn-group" role="group" aria-label="btn-group">
55
<button type="button" class="btn btn-warning">tool4</button>
56
<button type="button" class="btn btn-warning">tool5</button>
57
<button
最低0.47元/天 解锁文章
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
