Bootstrap组件学习笔记（二）——按钮组和输入框组
2017-08-23 21:04
489 查看
目录
1.按钮组
2.输入框组
1.按钮组
1.1 总结
1.2 示例代码
1
2.输入框组 2.1总结
2.2 代码示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
2.3 代码截图效果
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 {14margin-top: 10px;15
}16
.dropdown{1718margin-top: 10px;19
}2021
.btn-group-demo{22margin-top:10px;23
}24
</style>25
</head>26
<body style="margin: 40px">2728
<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>3839
</div>4041
</div>4243
<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 type="button" class="btn btn-warning">tool6</button>58
</div>59
</div>6061
</div>6263
</div>6465
<div class="panel panel-primary">66
<div class="panel-heading">67
按钮组大小68
</div>69
<div class="panel-body">70
<div class="btn-group btn-group-lg" role="group" aria-label="btn-group">71
<button type="button" class="btn btn-primary">left</button>72
<button type="button" class="btn btn-primary">middle</button>73
<button type="button" class="btn btn-primary">right</button>74
</div>75
<hr/>76
<div class="btn-group" role="group" aria-label="btn-group">77
<button type="button" class="btn btn-success">left</button>78
<button type="button" class="btn btn-success">middle</button>79
<button type="button" class="btn btn-success">right</button>80
</div>81
<hr/>82
<div class="btn-group btn-group-sm" role="group" aria-label="btn-group">83
<button type="button" class="btn btn-warning">left</button>84
<button type="button" class="btn btn-warning">middle</button>85
<button type="button" class="btn btn-warning">right</button>86
</div>87
<hr/>88
<div class="btn-group btn-group-xs" role="group" aria-label="btn-group">89
<button type="button" class="btn btn-danger">left</button>90
<button type="button" class="btn btn-danger">middle</button>91
<button type="button" class="btn btn-danger">right</button>92
</div>93
</div>9495
</div>9697
<div class="panel panel-danger">98
<div class="panel-heading">99
嵌套按钮组100
</div>101
<div class="panel-body">102
<div class="btn-group" role="group" aria-label="btn-group">103
<button type="button" class="btn btn-success">left</button>104105
<div class="btn-group" role="group">106
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">107
middle108
<span class="caret"></span>109
</button>110
<ul class="dropdown-menu">111
<li><a href="#">Dropdown link</a></li>112
<li><a href="#">Dropdown link</a></li>113
</ul>114
</div>115
<button type="button" class="btn btn-success">right</button>116
</div>117118
</div>119120
</div>121122
<div class="panel panel-info">123
<div class="panel-heading">124
垂直排列按钮组125
</div>126
<div class="panel-body">127
<div class="btn-group btn-group-vertical" role="group" aria-label="btn-group">128
<button type="button" class="btn btn-info">left</button>129
<div class="btn-group" role="group">130
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">131
middle132
<span class="caret"></span>133
</button>134
<ul class="dropdown-menu">135
<li><a href="#">Dropdown link</a></li>136
<li><a href="#">Dropdown link</a></li>137
</ul>138
</div>139
<button type="button" class="btn btn-info">right</button>140
</div>141142
</div>143144
</div>145146
<div class="panel panel-primary">147
<div class="panel-heading">148
两端对齐排列按钮组149
</div>150
<div class="panel-body">151
<div class="btn-group btn-group-justified" role="group" aria-label="btn-group">152
<div class="btn-group" role="group">153
<button type="button" class="btn btn-default">Left</button>154
</div>155
<div class="btn-group" role="group">156
<button type="button" class="btn btn-default">middle</button>157
</div>158
<div class="btn-group" role="group">159
<button type="button" class="btn btn-default">right</button>160
</div>161
</div>162163
</div>164165
</div>166
</body>167
</html>1.3 按钮效果截图
2.输入框组 2.1总结
2.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-danger">
29
<div class="panel-heading">
30
常规输入框组
31
</div>
32
<div class="panel-body">
33
<div class="input-group">
34
<span class="input-group-addon">@</span>
35
<input type="text" class="form-control" placeholder="用户名">
36
</div>
37
<hr/>
38
<div class="input-group">
39
40
<input type="text" class="form-control" placeholder="qqnumber">
41
<span class="input-group-addon">@qq.com</span>
42
</div>
43
<hr/>
44
<div class="input-group">
45
<span class="input-group-addon">￥</span>
46
<input type="text" class="form-control" placeholder="100">
47
<span class="input-group-addon">.00</span>
48
</div>
49
</div>
50
</div>
51
52
<div class="panel panel-info">
53
<div class="panel-heading">
54
输入框组大小
55
</div>
56
<div class="panel-body">
57
<div class="input-group input-group-lg">
58
<span class="input-group-addon">@</span>
59
<input type="text" class="form-control" placeholder="用户名">
60
</div>
61
<hr/>
62
<div class="input-group">
63
64
<input type="text" class="form-control" placeholder="qqnumber">
65
<span class="input-group-addon">@qq.com</span>
66
</div>
67
<hr/>
68
<div class="input-group input-group-sm">
69
<span class="input-group-addon">￥</span>
70
<input type="text" class="form-control" placeholder="100">
71
<span class="input-group-addon">.00</span>
72
</div>
73
</div>
74
</div>
75
76
77
<div class="panel panel-danger">
78
<div class="panel-heading">
79
单选/多选按钮输入框组合
80
</div>
81
<div class="panel-body">
82
83
<div class="row">
84
<div class="col-lg-6">
85
<div class="input-group">
86
<span class="input-group-addon">
87
<input type="checkbox">
88
</span>
89
<input type="text" class="form-control" placeholder="多选按钮输入框组">
90
</div>
91
</div>
92
<div class="col-lg-6">
93
<div class="input-group">
94
<span class="input-group-addon">
95
<input type="radio">
96
</span>
97
<input type="text" class="form-control" placeholder="单选按钮输入框组">
98
</div>
99
</div>
100
</div>
101
</div>
102
</div>
103
104
<div class="panel panel-primary">
105
<div class="panel-heading">
106
按钮下拉菜单输入框组合
107
</div>
108
<div class="panel-body">
109
110
<div class="input-group">
111
112
<div class="input-group-btn">
113
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
114
菜单<span class="caret"></span>
115
</button>
116
<ul class="dropdown-menu">
117
<li><a href="#">Action</a></li>
118
<li><a href="#">Another action</a></li>
119
<li><a href="#">Something else here</a></li>
120
<li role="separator" class="divider"></li>
121
<li><a href="#">Separated link</a></li>
122
</ul>
123
</div>
124
<input type="text" class="form-control" placeholder="输入点什么">
125
</div>
126
127
</div>
128
</div>
129
130
<div class="panel panel-warning">
131
<div class="panel-heading">
132
分列式按钮下拉菜单输入框组合
133
</div>
134
<div class="panel-body">
135
136
<div class="input-group">
137
138
<div class="input-group-btn">
139
<button type="button" class="btn btn-default">分裂按钮菜单</button>
140
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
141
<span class="caret"></span>
142
<span class="sr-only">Toggle Dropdown</span>
143
</button>
144
<ul class="dropdown-menu">
145
<li><a href="#">Action</a></li>
146
<li><a href="#">Another action</a></li>
147
<li><a href="#">Something else here</a></li>
148
<li role="separator" class="divider"></li>
149
<li><a href="#">Separated link</a></li>
150
</ul>
151
</div>
152
<input type="text" class="form-control" placeholder="输入点什么">
153
</div>
154
155
</div>
156
</div>
157
158
<div class="panel panel-info">
159
<div class="panel-heading">
160
按钮组输入框组
161
</div>
162
<div class="panel-body">
163
<div class="input-group">
164
165
<div class="input-group-btn">
166
<button type="button" class="btn btn-default" aria-label="Bold">
167
<span class="glyphicon glyphicon-bold"></span>
168
</button>
169
<button type="button" class="btn btn-default" aria-label="Italic">
170
<span class="glyphicon glyphicon-italic"></span>
171
</button>
172
</div>
173
174
<input type="text" class="form-control" placeholder="...">
175
</div>
176
<hr/>
177
</div>
178
</div>
179
</body>
180
</html>
2.3 代码截图效果
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [学习笔记] bootstrap (四) : 布局组件1(下拉,按钮组[toolbar],上拉)
- Bootstrap基本组件学习笔记之input输入框组(9)
- Bootstrap学习总结笔记（8）-- 基本组件之按钮组
- Bootstrap基本组件学习笔记之按钮组(8)
- Bootstrap组件学习笔记（四）——分页和翻页
- 【学习笔记】Bootstrap常用组件整理
- Bootstrap组件学习笔记（五）——标签、徽章和巨幕
- BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
- Bootstrap3学习笔记：按钮
- Metro UI CSS 学习笔记之组件（进度条、按钮组和评分）
- bootstrap菜单、按钮及导航学习笔记5-18导航（基础样式）
- extjs学习笔记----按钮和日期组件
- Java学习笔记（AWT组件 之 按钮）
- Bootstrap学习总结笔记（10）-- 基本组件之导航
- Bootstrap基本组件学习笔记之导航(10)
- Bootstrap基本组件学习笔记之分页(12)
- Bootstrap学习笔记之组件（二）
- bootstrap 学习笔记 - 4 （按钮 + 图片 + 辅助类）
- 学习笔记6-bootstrap 表格、表单、按钮以及图片
- 【菜鸟学习笔记】bootstrap_分裂按钮下拉列表