Bootstrap组件学习笔记（二）——按钮组和输入框组

最新推荐文章于 2024-09-02 09:11:19 发布
最新推荐文章于 2024-09-02 09:11:19 发布
阅读量2.4k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： front-end(bootstrap) 文章标签： bootstrap bootstrap学习 btn-group input-group
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_28057577/article/details/77511822
本文深入探讨了Bootstrap中的按钮组和输入框组。通过实例代码，展示了不同类型的按钮组，包括普通按钮组、按钮工具栏、大小调整、嵌套按钮组和垂直排列。同时，还详细讲解了输入框组的使用，如常规输入框、大小调整、单选/多选按钮组合以及按钮下拉菜单和分列式按钮下拉菜单的输入框组合。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录
    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
                        middle
108
                        <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
                        middle
132
                        <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 代码截图效果

 
    
Bootstrap5 输入框组
xyq2024的博客
06-25 422
输入框组是 Bootstrap5 中的一个重要组件，它允许开发者将输入框与其他元素（如按钮、标签、文本提示等）组合在一起，形成一个功能强大且美观的表单元素。通过使用输入框组，我们可以创建更加灵活和可定制的表单。Bootstrap5 输入框组是一个功能强大且易于使用的组件，可以帮助开发者快速搭建美观且灵活的表单。通过本文的介绍，相信读者已经对输入框组有了基本的了解。在实际开发中，读者可以根据自己的需求，灵活运用输入框组的各种特性，打造出更加优秀的网页。
Bootstrap v3 学习笔记 —— 组件
cccloveforever的博客
04-06 1237
Bootstrap 自带了大量可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
Bootstrap 输入框组
weixin_33704234的博客
01-27 152
2019独角兽企业重金招聘Python工程师标准>>> ...
html输入框组摁钮组,Bootstrap CSS组件之输入框组
weixin_30889555的博客
06-04 520
本文实例为大家分享了Bootstrap输入框组的具体代码，供大家参考，具体内容如下了解table-cell的表格width设置为1%的原因。通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。input-group(input-group-xs,input-group-sm,i...
input输入框和按钮相关联
qq_44821064的博客
08-27 440
输入的内容被存放在e.detail.value中，将其提取出来赋值给在data中定义的变量value, 然后在wxml页面中显示出来，由于button按钮中有个属性disabled是否禁用按钮，输入内容的时候，vaule.legth发生改变，将这个值和属性disabled关联起来！来控制按钮是否禁用！注意事项：这个实验主要是加强button 和input组件的理解！当input输入框中输入内容的时候，按钮从禁用状态变成可用状态！有了内容，提交按钮才会起作用！输入框中输入的内容会同步输出，
Bootstrap——按钮式下拉菜单、输入框组
Shiliang1995
06-15 1683
<!-- 图标 --> <!-- aria-label属性表示该标签的意图 --> <!-- 如果图标纯粹当装饰作用时，可以给这些图标设置aria-hidden=“true”属性 -->
bootstrap按钮组（一）
weixin_34194379的博客
12-12 281
按钮（按钮组）单个按钮在Web页面中的运用有时候并不能满足我们的业务需求，常常会看到将多个按钮组合在一起使用，比如富文本编辑器里的一组小图标按钮等。那么在这一节中，我们主要向大家介绍Bootstrap框架为大家提供的按钮组组件。源码查询：按钮组也是一个独立的组件，所以可以找到对应的源码文件： LESS版本：对应的源文件为buttons.less Sass版本：对应的源文件...
Bootstrap基本组件学习笔记之分页(12)
11-26
在这个案例中，我们添加了一个文本输入框和“Go”按钮，允许用户输入页码并直接跳转。这可以通过JavaScript或者jQuery监听按钮点击事件，获取输入值并进行页面重定向来实现。 0x03 翻页（Pager） 除了常规的分页，...
Bootstrap v3 学习笔记 —— 全局 CSS 样式
cccloveforever的博客
04-05 1889
Bootstrap v3 设置全局的 CSS 样式。
移动web——学习笔记整理
Thaley的博客
01-22 4727
学习笔记整理——移动web(黑马的)
bootstrap带有下拉按钮的输入框_bootstrap输入框组件使用方法详解
weixin_36079387的博客
12-29 1013
本文实例为大家分享了bootstrap输入框组的具体使用方法，供大家参考，具体内容如下1、基本用法我们有时需要在输入框一侧或两侧添加额外的元素这个时候只需要把所有元素都包裹在一个.input-group的div里面就可以但是每个输入框组只能有一个input@.00$.002、尺寸给最外层的.input-group添加.input-group-lg.input-group-sm.input-grou...
bootstrap 中 input输入框与其他样式的组合
春夏秋冬
11-25 2万+
比如这样的，将bootstrap的定义的图标放入input 用户名 密　码
Bootstrap中按钮组，输入框组总结
YZSS17的博客
01-31 616
总览 按钮组 按钮组允许多个按钮被堆叠在同一行上。当把按钮对齐在一起时，非常有用。 下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class： Class 描述 代码示例 .btn-group 该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。 <div class="btn-group"> <button type="button" class="btn btn-default"&g.
Bootstrap5 表单输入输入组（带复选框、带单选按钮、带按钮、带下拉按钮）
最新发布
听海边涛声
09-02 806
Bootstrap5 表单输入输入组（带复选框、带单选按钮、带按钮、带下拉按钮）
bootstrap输入框组件
m0_51281306的博客
03-29 926
<div class="container"> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Username"> </div> <div ...
Bootstrap组件：图标 按钮组 输入框组 导航 面板
锦鲤姑娘的博客
03-09 527
图标、按钮组、输入框组、导航、面板
bootstrap输入框组（13）
qq_43687284的博客
12-28 440
向 .form-control 添加前缀或后缀元素的步骤如下： 把前缀或后缀元素放在一个带有 class .input-group 的 &amp;lt;div&amp;gt; 中。 接着，在相同的 &amp;lt;div&amp;gt; 内，在 class 为 .input-group-addon 的 &amp;lt;span&amp;gt; 内放置额外的内容。 把该 &amp;lt;span&amp;gt; 放置在 &amp
输入框和button不对齐问题
qq_40675917的博客
07-09 1496
在设置了输入框和按钮的高度后,输入框和按钮看起来仍然不对齐,这时候给button的ccs加上vertical-align:top;然后就会对齐了.
bootstrap如何把表单select input button弄在一行
热门推荐
竹音林的专栏
11-08 2万+
bootstrap很多折叠样式css都已经写好，可以直接用，很方便。但是，如果遇到一些bootstrap文档里面没有的例子，估计很多初学者都懵了，然后会折腾很久也未见得有效。今天主要讲如何把select input button弄在一行，因为直接用bootstrap的form-control样式会出现换行！只需要解决为何换行即可；form-control有个属性：width:100%，这个是产生换
Bootstrap CSS组件深度解析：图标、下拉菜单与按钮组
在Bootstrap读书笔记中，我们重点关注了CSS组件这一部分，特别是针对Bootstrap 3框架中的组件设计和使用。Bootstrap以其简洁、易用的设计风格在前端开发中占据重要地位，其中CSS组件是其三大核心之一，这包括图标...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值