Bootstrap组件学习笔记（二）——按钮组和输入框组
来源：互联网 发布：店宝宝和淘宝关系 编辑：程序博客网 时间：2024/05/17 09:31
目录
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 type="button" class="btn btn-warning">tool6</button>58
</div>59
</div>60
61
</div>62
63
</div>64
65
<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>94
95
</div>96
97
<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>104
105
<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>117
118
</div>119
120
</div>121
122
<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>141
142
</div>143
144
</div>145
146
<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>162
163
</div>164
165
</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 代码截图效果
阅读全文
0 0
- Bootstrap组件学习笔记（二）——按钮组和输入框组
- bootstrap——组件（二、按钮组）
- Bootstrap学习总结笔记（9）-- 基本组件之input输入框组
- bootstrap——组件（四、输入框组）
- Bootstrap布局组件—3.按钮组
- Bootstrap组件学习笔记（七）——列表组和面板
- Bootstrap学习总结笔记（8）-- 基本组件之按钮组
- Bootstrap学习笔记之组件（二）
- Bootstrap学习（二）——Bootstrap 布局组件
- Bootstrap布局组件—4.输入框组
- bootstrap按钮组（二）
- 3.3Bootstrap学习组件篇之输入框组
- bootstrap 学习笔记 - 6 （输入框组 + ）
- Bootstrap组件学习笔记（六）——页头、缩略图和警告框
- Bootstrap组件之按钮组
- [学习笔记] bootstrap (四) : 布局组件1(下拉,按钮组[toolbar],上拉)
- Bootstrap组件之输入框组
- bootstrap框架学习笔记二（表单、按钮）
- Swagger简介
- Linux Android 相关书籍
- OAuth 2.0 构建微服务身份认证（一）：授权模式选择
- Unity (二) Animator：Events
- HDU6144 Arithmetic of Bomb (2017百度之星程序设计大赛
- Bootstrap组件学习笔记（二）——按钮组和输入框组
- 教你怎么在新浪微博发布全景图,赚取微博全景第一波
- jQuery节点操作方法
- 图结构练习——最短路径（Floyd算法）
- JavaFX设置Button设置选中、按下样式
- 括号匹配检测 逆波兰表达式
- HDU6069(筛法 有新技巧)
- Python实现读取文件中的算式并计算结果
- MySQL 解压版安装--配置
