【15】Bootstrap — 输入框组

最新推荐文章于 2020-09-06 19:21:25 发布
最新推荐文章于 2020-09-06 19:21:25 发布
阅读量263 收藏
点赞数
文章标签： bootstrap 输入框组
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32629809/article/details/77857740
版权

通过在文本输入框 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 或 .input-group-btn 类，可以给 .form-control 的前面或后面添加额外的元素。

基本实例

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding-top: 20px;">
        <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="Username">
        </div>
        <br/>
        <div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-addon">.00</span>
        </div>
        <br/>
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control">
            <span class="input-group-addon">.00</span>
        </div>
        <br/>
    </body>
</html>

输入框组基本实例

控制输入框组大小

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding-top: 20px;">
        <div class="input-group input-group-lg">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="Username">
        </div>
        <br/>
        <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="Username">
        </div>
        <br/>
        <div class="input-group input-group-sm">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="Username">
        </div>
        <br/>
    </body>
</html>

控制输入框组大小

作为额外元素的多选框和单选框

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding-top: 20px;">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="checkbox">
                    </span>
                    <input type="text" class="form-control">
                </div>
                <!-- /input-group -->
            </div>
            <!-- /.col-lg-6 -->
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="radio">
                    </span>
                    <input type="text" class="form-control">
                </div>
                <!-- /input-group -->
            </div>
            <!-- /.col-lg-6 -->
        </div>
        <!-- /.row -->
    </body>
</html>

作为额外元素的多选框和单选框

作为额外元素的按钮

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding-top: 20px;">
        <div class="col-lg-6">
            <div class="input-group">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Go!</button>
                </span>
                <input type="text" class="form-control">
            </div>
            <!-- /input-group -->
        </div>
        <!-- /.col-lg-6 -->
        <div class="col-lg-6">
            <div class="input-group">
                <input type="text" class="form-control">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Go!</button>
                </span>
            </div>
            <!-- /input-group -->
        </div>
        <!-- /.col-lg-6 -->
        </div>
        <!-- /.row -->
    </body>
</html>

作为额外元素的按钮

作为额外元素的按钮式下拉菜单

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding-top: 20px;">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                        <ul class="dropdown-menu" role="menu">
                            <li>
                                <a href="#">Action</a>
                            </li>
                            <li>
                                <a href="#">Another action</a>
                            </li>
                            <li>
                                <a href="#">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <!-- /btn-group -->
                    <input type="text" class="form-control">
                </div>
                <!-- /input-group -->
            </div>
            <!-- /.col-lg-6 -->
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li>
                                <a href="#">Action</a>
                            </li>
                            <li>
                                <a href="#">Another action</a>
                            </li>
                            <li>
                                <a href="#">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <!-- /btn-group -->
                </div>
                <!-- /input-group -->
            </div>
            <!-- /.col-lg-6 -->
        </div>
        <!-- /.row -->
    </body>
</html>

作为额外元素的按钮式下拉菜单

作为额外元素的分裂式按钮下拉菜单

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding-top: 20px;">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <div class="input-group-btn open">
                        <button type="button" class="btn btn-default" tabindex="-1">Action</button>
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1" aria-expanded="true">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li>
                                <a href="#">Action</a>
                            </li>
                            <li>
                                <a href="#">Another action</a>
                            </li>
                            <li>
                                <a href="#">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <input type="text" class="form-control">
                </div>
                <!-- /.input-group -->
            </div>
            <!-- /.col-lg-6 -->
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default" tabindex="-1">Action</button>
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li>
                                <a href="#">Action</a>
                            </li>
                            <li>
                                <a href="#">Another action</a>
                            </li>
                            <li>
                                <a href="#">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">Separated link</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- /.input-group -->
            </div>
            <!-- /.col-lg-6 -->
        </div>
        <!-- /.row -->
    </body>
</html>

作为额外元素的分裂式按钮下拉菜单

有心博客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap—输入框组input-group
生如夏花 炫至茶靡
12-14 4万+
相信你在很多的网站页面上都看见过这样的输入框： 这样的输入框我们通过原生的手写css也能实现，但是使用Bootstrap的输入框组会让你实现起来更加简便。 实现在输入框前后添加元素的代码如下： 输入框组 @
bootstrap的输入框组
I hava a dream
02-11 2177
通过在文本输入框 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 类，可以给 .form-control 的前面或后面添加额外的元素。 只支持文本输入框 这里请避免使用 元素，因为 WebKit 浏览器不能完全绘制它的样式。 避免使用 元素，由于它们的 rows 属性在某些情况下不被支持。 输入框
Bootstarp学习教程（11） 输入框组组件
zhouzhiwengang的专栏
01-18 1305
基本案例：通过在基于文本的输入框前面，后面或是两边加上文字或按钮，可以扩展对表单的控制。用带有.input-group-addon的.input-group，可以给.form-control前面或后面追加元素。 @ <input type="text" class="form-control" placeholder="Username"> <span
bootstrap的按钮和按钮群组
xdd_lmd的博客
06-20 1283
按钮 <div class="container"> <h1 class="page-header"> 按钮<small>按钮的基本样式</small> </h1> <div style="margin-bottom: 15px"> <a href="#" class="btn btn-large
Bootstrap_文档_04_下拉菜单_按钮_输入框_导航
pre_eminent的JAVA学习园地
05-31 1383
组件无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。Glyphicons 字体图标所有可用的图标包括250多个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的，但是他们的作者允许 Bootstrap 免费使用。为了表示感谢，希望你在使用时尽量为 Glyphicons 添加一个友情链接。如何使用出于性能的考虑，...
bootstrap输入框组使用方法
08-31
通过以上代码示例，我们可以看出Bootstrap输入框组的灵活性和实用性。它可以轻松地创建带有附加元素的输入字段，提高了用户界面的交互性和美观度。无论是在表单提交、搜索栏还是其他数据输入场景中，输入框组都是一...
bootstrap输入框组代码分享
09-02
总之，Bootstrap输入框组是一个强大的工具，可以帮助开发者轻松创建带有附加元素的表单控件，提升用户界面的美观度和功能性。理解并熟练掌握输入框组的使用，能让你的Bootstrap项目更加专业和吸引人。
Bootstrap 输入框组
12-13
Bootstrap 输入框组是前端开发中一个非常实用的组件，它允许开发者将输入控件与其它元素（如按钮、复选框、单选按钮等）组合在一起，形成一个整体的输入框组，提供更加丰富的交互体验。这个特性尤其适用于构建表单和...
bootstrap下拉列表与输入框组结合的样式调整
09-01
在Bootstrap中，输入框组（Input Groups）和下拉列表（Dropdowns）是两个常用的功能，它们可以组合使用，以创建更复杂的用户界面。下面我们将深入探讨如何在Bootstrap中调整下拉列表与输入框组结合的样式。 首先，...
BootStrap复习之BootStrap组件
Java学习之乐的博客
05-27 271
今日目录：        1、        2、一、二、添加小编微信可以获取免费资源，二维码要用到的工具，关注公众号直接免费获取：
Bootstrap——按钮式下拉菜单、输入框组
Shiliang1995
06-15 1558
<!-- 图标 --> <!-- aria-label属性表示该标签的意图 --> <!-- 如果图标纯粹当装饰作用时，可以给这些图标设置aria-hidden=“true”属性 -->
分裂式按钮下拉菜单
weixin_30273931的博客
06-12 306
相似的，分裂式按钮下拉菜单也需要同样的改变一些标记，但只是多一个分开的按钮。 示例代码 <!––Split button––> <div class="btn - group"> <button type="button" class="btn - btn - danger">Action</button> <button type=...
Bootstrap中的输入框组如何制作？
LuckXinXin的博客
07-12 749
（1）把前缀或者后缀元素放在一个带有class="input-group"中的<div>中 （2）在该<div>内，在class="input-group-addon"的<span>里面放置额外的内容； （3）把<span>放在<input>元素的前面或后面。 ...
Bootstrap组件学习笔记（二）——按钮组和输入框组
Andy_lau
08-23 2321
目录     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
BootStrap--CSS组件--输入框组(input-group)
热门推荐
王欢的博客
12-16 2万+
了解table-cell的表格width设置为1%的原因。http://www.tuicool.com/articles/VzUVfyi 通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。input-group(input-group-xs,input-group-sm,in
GWT-Bootstrap3中 组件开发文档（一）
墨者侠客
08-11 2760
最近要对公司项目重构，需要使用GWT-Bootstrap3中组件开发，
Bootstrap 组件：输入框组组件的使用
WangMin@汪末末
09-06 2093
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 通过在文本输入框 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 或 .input-group-btn 类，可以给 .form-control 的前面或后面添加额外的元素。 注意： 1. 只支持文本输入框<input> 这里请避免使用<select>元素和<textarea>元
bootstrap——组件（四、输入框组）
zaichuanguanshui的专栏
01-19 2703
1、基本用法 我们有时需要在输入框一侧或两侧添加额外的元素 这个时候只需要把所有元素都包裹在一个.input-group的div里面就可以 但是每个输入框组只能有一个input <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-co
bootstrap输入框
最新发布
10-20
Bootstrap输入框是一种常用的前端UI组件，可以用于表单输入等场景。Bootstrap提供了多种输入框组件，包括基本输入框、带前缀或后缀的输入框、带按钮的输入框、带复选框或单选框的输入框等。可以通过添加不同的class...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值