BootStrap3 输入框组系列

最新推荐文章于 2024-06-04 08:58:47 发布
最新推荐文章于 2024-06-04 08:58:47 发布
阅读量646 收藏 1
点赞数
分类专栏： BootStrap3 文章标签： bootstrap3 输入框组 input-group
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32617703/article/details/103217011
版权

目录

官方地址

https://v3.bootcss.com/components/#input-groups

普通文本作为额外元素

.input-group
.input-group-addon

普通字符

<div class="container">
    <form>
        <div class="form-group">
            <label for="number">价格: </label>
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input id="number" type="number" class="form-control"/>
                <span class="input-group-addon">.00</span>
            </div>
        </div>
    </form>
</div>

单选和多选

<div class="container">
    <form>
        <div class="form-group">
            <label for="user">用户名：</label>
            <div class="input-group">
                <span class="input-group-addon">
                    <input type="checkbox"/>
                </span>
                <input id="user" type="text" class="form-control"/>
                <span class="input-group-addon">
                    <input type="radio"/>
                </span>
            </div>
        </div>
    </form>
</div>

按钮作为额外元素

.input-group-btn

单个按钮

<div class="container">
    <form>
        <!-- 单个按钮 -->
        <div class="form-group">
            <label for="example1">Example: </label>
            <div class="input-group">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-primary">Primary</button>
                </span>
                <input id="example1" type="text" class="form-control"/>
                <span class="input-group-btn">
                    <button type="submit" class="btn btn-info">GO</button>
                </span>
            </div>
        </div>
    </form>
</div>

下拉和分裂式

<div class="container">
    <form>
        <!-- 下拉菜单 -->
        <div class="form-group">
            <label for="example2">Example2: </label>
            <div class="input-group">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                        Dropdown
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">菜单项1</a>
                        </li>
                        <li>
                            <a href="#">菜单项2</a>
                        </li>
                        <li>
                            <a href="#">菜单项3</a>
                        </li>
                    </ul>
                </div>
                <!-- 向上弹出下拉菜单 -->
                <div class="input-group-btn dropup">
                    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                        Dropdown
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">菜单项1</a>
                        </li>
                        <li>
                            <a href="#">菜单项2</a>
                        </li>
                        <li>
                            <a href="#">菜单项3</a>
                        </li>
                    </ul>
                </div>
                <input id="example2" type="text" class="form-control"/>
                <!-- 分裂式 -->
                <div class="input-group-btn">
                    <button type="button" class="btn btn-warning">Dropdown</button>
                    <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">菜单项1</a>
                        </li>
                        <li>
                            <a href="#">菜单项2</a>
                        </li>
                        <li>
                            <a href="#">菜单项3</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </form>
</div>

多个按钮

<div class="container">
	<form>
        <!-- 多个按钮 -->
        <div class="form-group">
            <label for="example3">Example3: </label>
            <div class="input-group">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-bold"></span>
                    </button>
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-italic"></span>
                    </button>
                </div>
                <input id="example3" type="text" class="form-control"/>
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-align-left"></span>
                    </button>
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-align-center"></span>
                    </button>
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-align-right"></span>
                    </button>
                </div>
            </div>
        </div>
	</form>
</div>

尺寸

input-group-lg

<div class="container">
	<form>
        <!-- input-group-lg -->
        <div class="form-group">
            <label for="example4">input-group-lg：</label>
            <div class="input-group input-group-lg">
                <span class="input-group-addon">
                    <input type="checkbox"/>
                </span>
                <input id="example4" type="text" class="form-control"/>
                <span class="input-group-addon">
                    <input type="radio"/>
                </span>
            </div>
        </div>
	</form>
</div>

整体代码

<!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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>29输入框组</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body class="">

<pre class="pre-scrollable">

    输入框组只适用于&lt;input class="form-control"&gt;

    为输入框组添加工具提示组件或者弹出框组件，必须指定container: 'body'

</pre>

<!-- 普通文本作为额外元素

    普通文本：
        纯字符
        单选
        多选

-->
<div class="container">
    <form>
        <div class="form-group">
            <label for="number">价格: </label>
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input id="number" type="number" class="form-control"/>
                <span class="input-group-addon">.00</span>
            </div>
        </div>

        <div class="form-group">
            <label for="user">用户名：</label>
            <div class="input-group">
                <span class="input-group-addon">
                    <input type="checkbox"/>
                </span>
                <input id="user" type="text" class="form-control"/>
                <span class="input-group-addon">
                    <input type="radio"/>
                </span>
            </div>
        </div>
    </form>
</div>

<!-- 按钮作为额外元素

    按钮：
        单个按钮
        下拉菜单
        分裂式按钮
        多个按钮

-->
<div class="container">
    <form>
        <!-- 单个按钮 -->
        <div class="form-group">
            <label for="example1">Example: </label>
            <div class="input-group">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-primary">Primary</button>
                </span>
                <input id="example1" type="text" class="form-control"/>
                <span class="input-group-btn">
                    <button type="submit" class="btn btn-info">GO</button>
                </span>
            </div>
        </div>

        <!-- 下拉菜单 -->
        <div class="form-group">
            <label for="example2">Example2: </label>
            <div class="input-group">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                        Dropdown
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">菜单项1</a>
                        </li>
                        <li>
                            <a href="#">菜单项2</a>
                        </li>
                        <li>
                            <a href="#">菜单项3</a>
                        </li>
                    </ul>
                </div>
                <input id="example2" type="text" class="form-control"/>
                <div class="input-group-btn">
                    <button type="button" class="btn btn-warning">Dropdown</button>
                    <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">菜单项1</a>
                        </li>
                        <li>
                            <a href="#">菜单项2</a>
                        </li>
                        <li>
                            <a href="#">菜单项3</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 多个按钮 -->
        <div class="form-group">
            <label for="example3">Example3: </label>
            <div class="input-group">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-bold"></span>
                    </button>
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-italic"></span>
                    </button>
                </div>
                <input id="example3" type="text" class="form-control"/>
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-align-left"></span>
                    </button>
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-align-center"></span>
                    </button>
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-align-right"></span>
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- 尺寸 -->
<div class="container">
    <form>
        <!-- input-group-lg -->
        <div class="form-group">
            <label for="example4">input-group-lg：</label>
            <div class="input-group input-group-lg">
                <span class="input-group-addon">
                    <input type="checkbox"/>
                </span>
                <input id="example4" type="text" class="form-control"/>
                <span class="input-group-addon">
                    <input type="radio"/>
                </span>
            </div>
        </div>
        <!-- 正常尺寸 -->
        <div class="form-group">
            <label for="example6">正常尺寸: </label>
            <div class="input-group">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                        Dropdown
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">菜单项1</a>
                        </li>
                        <li>
                            <a href="#">菜单项2</a>
                        </li>
                        <li>
                            <a href="#">菜单项3</a>
                        </li>
                    </ul>
                </div>
                <input id="example6" type="text" class="form-control"/>
                <div class="input-group-btn">
                    <button type="button" class="btn btn-warning">Dropdown</button>
                    <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">菜单项1</a>
                        </li>
                        <li>
                            <a href="#">菜单项2</a>
                        </li>
                        <li>
                            <a href="#">菜单项3</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- input-group-sm -->
        <div class="form-group">
            <label for="example5">input-group-sm: </label>
            <div class="input-group input-group-sm">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-bold"></span>
                    </button>
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-italic"></span>
                    </button>
                </div>
                <input id="example5" type="text" class="form-control"/>
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-align-left"></span>
                    </button>
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-align-center"></span>
                    </button>
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-align-right"></span>
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

input-group-sm

<div class="container">
	<form>
        <!-- input-group-sm -->
        <div class="form-group">
            <label for="example5">input-group-sm: </label>
            <div class="input-group input-group-sm">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-bold"></span>
                    </button>
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-italic"></span>
                    </button>
                </div>
                <input id="example5" type="text" class="form-control"/>
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-align-left"></span>
                    </button>
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-align-center"></span>
                    </button>
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-align-right"></span>
                    </button>
                </div>
            </div>
        </div>
	</form>
</div>
爱喝水的qdy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap 输入框组
shengyin714959的博客
08-14 225
本章将讲解 Bootstrap 支持的另一个特性，输入框组。输入框组扩展自。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。向。
bootstrap下拉列表与输入框组结合的样式调整
09-01
输入框组默认是div.input-group。接下来通过本文给大家介绍bootstrap下拉列表与输入框组结合的样式调整，感兴趣的朋友一起看看吧
bootstrap输入框组
zhengun的专栏
05-14 201
关于作者： 郑云飞, 程序员Java（web前端，web后端，oracle数据库or mysql数据库） 艺名：天放 weibo：@tianFang blog: zhengyunfei.iteye.com email: zhengyunfei8@gmail.com 本文主要来讲解以下内容：1.基本案例；2.尺寸；3.复选框和单选框；4.附加按钮；5.带下拉菜单的按钮；6.分段按...
BootStrap入门到实战：BootStrap组件（二）- 输入框组、导航、导航条、路径导航（面包屑效果）
最新发布
林林一928的博客
06-04 763
导航标签用于在网页上创建各种风格的导航栏，包括水平标签页、胶囊式标签页、垂直堆叠的胶囊式标签页、两端对齐的胶囊式标签页、禁用的链接以及带下拉菜单的标签页。bootstrap的导航条是一个高度可定制的界面组件，它不仅支持丰富的界面元素配置，还提供了灵活的空间布局策略。在实际运用场景中，输入组（Input Group）在Bootstrap框架中主要用于提高表单的可读性和用户友好性，通过将相关控件组合在一起，为用户提供更直观、更易于操作的表单体验。添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。
Bootstrap3系列：输入框组
weixin_34356555的博客
09-06 186
1. 基本实例 　　通过在文本输入框 &lt;input&gt; 前面、后面或是两边加上文字或按钮，实现对表单控件的扩展。 　　.input-group包含.input-group-addon给 .form-control 的前面或后面添加额外的元素。 　　输入框组只支持文本输入框 &lt;input&gt;，避免使用 &lt;select&gt;、&lt;textarea&gt;。 1....
Bootstrap输入框组
遇见更好的自己
06-12 1041
向.form-control添加前缀或后缀元素的步骤如下：（1）把前缀或后缀元素放在一个带有class.input-group的<div>中 （2）在相同的<div>内，在class为.input-group-addon的<span>内放置额外的内容 （3）把<span>放置在<input>元素的前面或者后面1.基本输入框组//邮箱输入框组，不用输入@ 和 .com <div class="inpu
3.5 Bootstrap 输入框组
梁辰兴的博客
07-16 1351
注意：为了保持跨浏览器的兼容性，请避免使用 元素，因为它们在 WebKit 浏览器中不能完全渲染出效果。也不要直接向表单组应用输入框组的 class，输入框组是一个孤立的组件。通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。您也可以把按钮作为输入框组的前缀或者后缀元素，这个时候您就不是添加。
bootstrap3 input 验证样式【转】
weixin_30951743的博客
01-10 185
feedback <form role="form"> <div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess1">成功状态</label> ...
Bootstrap4 输入框组
12-14
在Bootstrap4中，输入框组（Input Groups）是构建表单元素时非常实用的一个功能，它允许开发者在输入框周围添加额外的元素，如图标、文本或按钮，以提升用户体验和界面设计。 输入框组主要通过使用 `.input-group` ...
Bootstrap基本组件学习笔记之input输入框组(9)
11-28
这里的`<div class="input-group">`是输入框组的容器，`<input type="text" class="form-control">`是标准的Bootstrap输入框，而`<div class="input-group-btn">`则用于包裹按钮元素，确保它们与输入框对齐。...
Bootstrap3参考手册_Bootstrap3参考手册_
09-28
3. **组件**：Bootstrap3包含许多预先设计的组件，如导航条（navbar）、下拉菜单（dropdowns）、轮播（carousel）、警告框（alerts）、模态框（modals）、按钮组（button groups）、分页（pagination）等。...
bootStrap3及jquery、离线文档.zip
09-11
3. **表单控件**：Bootstrap 3 提供了统一的样式和布局用于表单元素，如输入框、复选框、单选按钮等，简化了表单设计。 4. **表格（Table）**：框架提供了预设的表格样式，包括striped（斑马纹行）、bordered（带...
BootStrap中关于input-group的问题（未解决）
wangchaoqi1985的博客
10-20 171
BootStrap中关于input-group的问题（未解决）
用bootstrap实现包含下拉列表、输入框、按钮的组合框
MrZZhou的博客
03-02 7790
应用场景很常见，就是带搜索类型选择的搜索框 效果 如图： width:100px; padding:3px 10px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background: #EAEAEA url('triangle.svg') no-repeat
Bootstrap笔记：辅助类，输入框组，复选框等
qq_34505594的博客
03-11 379
&lt;!Doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1,user-scaleable=no"&gt;&lt;/met
Bootstrap3【上手教程】
全栈
05-03 1514
​ 圆角矩形： 圆形/椭圆：这个比较牛逼，会根据图片来决定是宽椭圆还是高椭圆。 缩略图： ​
Bootstrap3 表单支持的控件
歪脖先生的博客
05-07 592
支持的控件 Bootstrap支持所有的标准表单控件，包括 input 控件、textarea 控件、checkbox 和 radio 控件、select 控件等。 1、input 控件 Bootstrap除了支持大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件：text、password、datetime、datetime-local、date、month、time、...
bootstrap调整输入框大小
05-26
你可以通过设置输入框的class属性来调整其大小。例如，如果你想让一个输入框更宽，可以在class中添加“form-control-lg”，如下所示： ```html <input class="form-control form-control-lg" type="text" placeholder="Large input"> ``` 类似地，如果你想让输入框更小，可以使用“form-control-sm”类： ```html <input class="form-control form-control-sm" type="text" placeholder="Small input"> ``` 你还可以自定义输入框的大小，通过添加自定义CSS样式来覆盖默认的Bootstrap样式。例如，以下CSS代码将使输入框的宽度为200px： ```css .custom-input { width: 200px; } ``` 然后在HTML中将class设置为“custom-input”： ```html <input class="form-control custom-input" type="text" placeholder="Custom input"> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值