输入组 - Input Groups

最新推荐文章于 2022-06-14 07:21:26 发布
最新推荐文章于 2022-06-14 07:21:26 发布
阅读量2.5k 收藏 3
点赞数 1
分类专栏： PHP
懒虫
本文链接：https://blog.csdn.net/xcbzsy/article/details/103596176
版权

在输入框前后添加扩展

要将输入框和扩展包裹在同一个 .input-group 内部，扩展需要添加 .input-group-addon 样式

<form>
    <div class="row">
        <div class="col-xs-4">
            <div class="input-group">
                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                <input type="text" class="form-control" placeholder="Username">
            </div>
        </div>
        <div class="col-xs-4">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Amount">
                <span class="input-group-addon">.00</span>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input type="text" class="form-control" placeholder="US Dollar">
                <span class="input-group-addon">.00</span>
            </div>
        </div>
    </div>
</form>

在这里插入图片描述

为检查框添加扩展

在 .input-group 内部，扩展需要添加 .input-group-addon 样式

<form>
    <div class="row">
        <div class="col-xs-6">
            <div class="input-group">
                <span class="input-group-addon">
                    <input type="checkbox">
                </span>
                <input type="text" class="form-control">
            </div>
        </div>

        <div class="col-xs-6">
            <div class="input-group">
                <span class="input-group-addon">
                    <input type="radio">
                </span>
                <input type="text" class="form-control">
            </div>
        </div>
    </div>
</form>

在这里插入图片描述

为输入框添加扩展按钮

包裹在 .input-group 内部，把按钮用 .input-group-btn 样式包裹起来

<form>
    <div class="row">
        <div class="col-xs-6">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search…">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default">Go</button>
                </span>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="input-group">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default">Action</button>
                    <button type="button" class="btn btn-default">Options</button>
                </span>
                <input type="text" class="form-control"  placeholder="Type something…">
            </div>
        </div>
    </div>
</form>

在这里插入图片描述

为输入框扩展下拉菜单

同样包裹在 .input-group 内部，把按钮用 .input-group-btn 样式包裹起来

<form>
    <div class="row">

        <div class="col-xs-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">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
                <input type="text" class="form-control">
            </div>
        </div>
        <div class="col-xs-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 pull-right">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</form>

在这里插入图片描述

为输入框同时扩展按钮和下拉菜单

同样包裹在 .input-group 内部，把按钮用 .input-group-btn 样式包裹起来

<form>
    <div class="row">
        <div class="col-xs-6">
            <div class="input-group">
                <div class="input-group-btn">
                    <button tabindex="-1" class="btn btn-default" type="button">Action</button>
                    <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
                <input type="text" class="form-control">
            </div>
        </div>

        <div class="col-xs-6">
            <div class="input-group">
                <input type="text" class="form-control">
                <div class="input-group-btn">
                    <button tabindex="-1" class="btn btn-default" type="button">Action</button>
                    <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu pull-right">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</form>

在这里插入图片描述

为输入组设置不同的尺寸

同样包裹在 .input-group 内部，同时设置 .input-group-lg .input-group-sm 之类的样式

<form>
    <!-- 大尺寸 -->
    <div class="row">
        <div class="col-xs-4">
            <div class="input-group input-group-lg">
                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                <input type="text" class="form-control">
            </div>
        </div>
        <div class="col-xs-4">
            <div class="input-group input-group-lg">
                <span class="input-group-addon">
                    <input type="checkbox">
                </span>
                <input type="text" class="form-control">
            </div>
        </div>
        <div class="col-xs-4">
            <div class="input-group input-group-lg">
                <div class="input-group-btn">
                    <button tabindex="-1" class="btn btn-default" type="button">Action</button>
                    <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu"> 
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
                <input type="text" class="form-control">
            </div>
        </div>
    </div>
</form>

在这里插入图片描述

新老农
关注
专栏目录
Bootstrap—输入框组input-group
生如夏花 炫至茶靡
12-14 4万+
相信你在很多的网站页面上都看见过这样的输入框： 这样的输入框我们通过原生的手写css也能实现，但是使用Bootstrap的输入框组会让你实现起来更加简便。 实现在输入框前后添加元素的代码如下： 输入框组 @
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
Bootstrap系列之输入组（Input group）
老__L的博客
06-14 3416
在input的任意一边放置一个附加组件或按钮。你也可以在input的两边都放一个。记住将放在输入组之外。 默认情况下，输入组通过来适应输入组中自定义的表单字段验证。你可以用来禁用它。 将相对表单大小类添加到本身，其中的内容将自动调整大小，而不需要在每个元素上重复表单控件大小类。 在输入组的插件中放置任何复选框或单选选项，代替文本。 虽然可支持多个，但验证样式仅用于具有单个的输入组。 支持多个插件，可以与复选框和单选输入版本混合使用。 输入组包括支持自定义选择和自定义文件输入。不支持这些浏览器的默认版本
Input group
BLOG域名:programb.blog.csdn.net
04-15 214
Input group Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs. ads via Carbon Limited time offer: Get 10 fr...
amazeui学习笔记--css（常用组件7）--输入框组Input-group
weixin_33796205的博客
05-09 885
amazeui学习笔记--css（常用组件7）--输入框组Input-group 一、总结 1、使用：Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。在容器上添加 .am-input-group，在标签文字上添加 .am-input-group-label 2、Icon组件及添加文字： &lt;div class="am-input-group"...
Bootstrap-3-Tutorial-28---Input-Group-Checkboxes-And-Radio-Addons:以下视频教程的代码
07-13
在Bootstrap 3版本中，输入组（Input Groups）是一个功能强大的组件，用于组合输入元素和附加按钮或标签，使得用户界面更加直观和易用。本教程将深入讲解如何在Bootstrap中使用输入组来添加复选框和单选按钮插件。 ...
Bootstrap-3-Tutorial-31---Input-Group-Segmented-Buttons:以下视频教程的代码
07-12
在Bootstrap 3中，输入组（Input Groups）是一个非常有用的功能，它允许我们将控件（如文本输入框、按钮等）组合在一起，以创建更加直观且用户友好的表单设计。本教程将专注于输入组中的分段按钮（Segmented Buttons...
Bootstrap基本组件学习笔记之input输入框组(9)
11-28
在Bootstrap中，输入框组（Input Groups）是一个非常实用的功能，允许开发者将文本输入框与其他元素如按钮、下拉菜单等组合在一起，以实现更复杂的交互和美观的布局。 在上述的示例中，我们看到了两个不同样式的...
conv2d的输入_Pytorch - Conv2d 卷积
weixin_40008946的博客
12-21 1213
关于 Pytorch 的CLASS torch.nn.Conv2d(in_channels, out_channels, kernel_size, stride=1, padding=0, dilation=1, groups=1, bias=True)假设 Conv2d 的输入 input 尺寸为 $(N, C_{in}, H_{in}, W_{in})$，输出 output 尺寸为 $(N, ...
python测试开发django-137.Bootstrap 输入框组件input-group
qq_27371025的博客
10-06 639
前言 在页面上看到的这种输入框控件可以用Bootstrap 输入框组件input-group来实现 input-group 输入框组 输入框组扩展自 表单控件，通过向输入域添加前缀和后缀的内容，可以向用户输入添加公共的元素。 例如，您可以添加美元符号，或者在用户名前添加 @，也可以在输入框后面加搜索2个字或button按钮。 使用input-group，轻松在输入框前后添加文本或者按钮元素，使用方法如下： 1.用一个包裹住输入框 input 按钮。 2.给input加上class="form-contr
groupinputs:轻松将数据输入到多个输入中
07-11
轻松将数据输入到多个输入中。 输入开始表现得好像它们共享数据： 当一个输入被填写时，光标移动到下一个 向左/向右箭头将光标移动到上一个/下一个输入 粘贴文本将填写多个输入，光标将留在粘贴文本的末尾，就好像它是单个输入字段一样。 安装 bower install --save groupinputs 例子 < script src =" jquery-1.7.2.js " > </ script > < script src =" jquery.groupinputs.js " > </ script > < input type =" text " maxlength =" 4 " class =" group1 " name ="" > < input type =" text " maxlength =" 4 " class =" group1 " name ="" > < in
jquery.input-group:为结构化表单输入组添加验证和反馈，与引导程序表单输入组兼容
06-08
#jquery.input-group 向结构化表单组添加验证和状态，与 Bootstrap 表单输入兼容。 ### 使用 bower bower install jquery.input-group 或 npm npm install jquery.input-group jquery.input-group 至少需要一定的 html 结构如下 < group> < inputGroup> < input > </ inputGroup> </ group> jquery.input-group 向该结构添加反馈类和消息。 < group xss=removed> < inputGroup> < input /> < fee
vue-limit-input-group：vue联合输入限制控件el-input-number增强
03-02
分组预设，预设控制组件 简述 limit-input-number基于element-ui的el-input-number控件基础改造，所以本组件依赖element-ui limit-input-number可直接替换el-input-number 安装 yarn add vue-limit-input-group 或者 npm i vue-limit-input-group -S 依赖 element-ui/el-input-number 属性 max：所有输入总和最低值min：所有输入总和最低值 事件 大于（newVal，overVal，maxVal）：当控件总和超过最小值 参数解释 newVal：当前输入的值overVal：剩余能量输入的数值maxVal：最大数值minVal：最小数值 使用方式 < limit-input-group max =" 12 " min =" 5
Bootstrap 学习之 （九）------ 输入框组
俊刚的博客
10-31 2014
输入框组 通过在文本输入框  前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 类，可以给 .form-control 的前面或后面添加额外的元素。 只支持文本输入框  这里请避免使用  元素，因为 WebKit 浏览器不能完全绘制它的样式。 避免使用  元素，由于它们的 rows 属性
input group html,基于Bootstrap使用jQuery实现输入框组input-group的添加
weixin_36443823的博客
07-01 436
本文实例为大家分享使用jQuery实现输入框组input-group的添加与删除操作，供大家参考，具体内容如下注意这里要求使用到Bootstrap框架的输入框组，如：Demo案例的效果图：这里提供自制的 插件 inputGroup.js参数为可以设置 输入框组中中间的控件是文本域还是输入框；以及设置在输入框组右侧的操作的内容。使用inputGroup.js只要在对应的容器，如p中添加选择器，然后使...
BootStrap输入框组
qq_39529315的博客
05-31 849
  input-group(输入框组)，输入框必须由input-group包裹，如果想做个图标加输入框的效果，根据顺序排版，图标所在span标签赋予input-group-addon样式，输入框input赋予form-control样式，让他填充整行+换行。代码：&lt;style&gt;div{  margin:5px;}&lt;/style&gt;&lt;div class="input-gr...
BootStrap之按钮组inputGroup
My52Hz
11-04 2204
邮箱类型后缀： &lt;div class="input-group"&gt; &lt;input type="text" class="form-control" placeholder="input username" /&gt; &lt;span class="input-group-addon"&gt;@mail.com&lt;/span
获取textarea输入的值_11 InputGroup输入组控件使用教程（plotly Dash Bootstrap版）
weixin_39781452的博客
11-29 600
今天第11课啦，送上一首《十一种孤独》，供大家欣赏~~~(一)功能InputGroup通过在Input，Textarea和Select组件的两侧添加文本，按钮或按钮组，轻松扩展表单控件Form。一般通过InputGroupAddon组合addon_type实现Input前后两侧添加相关文本或控件。 (二)调用方式 dash-bootstrap-component...
bootstrap框架之输入框组
青菜白玉堂的博客
02-23 364
基础用法 <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control"> </div> addon元素 addon元素不仅可以是label和icon，还可以是复选框、单选框和按钮。 ...
如何用数组实现输入多组数据
最新发布
09-26
### 回答1： 可以使用循环来实现输入多组数据，具体实现方法如下： ```c++ #include <iostream> using namespace std; int main() { int n; cin >> n; // 输入数据组数 for (int i = 0; i < n; i++) { int m; cin >> m; // 输入每组数据的长度 int arr[m]; for (int j = 0; j < m; j++) { cin >> arr[j]; // 输入每组数据的元素 } // 处理每组数据 for (int j = 0; j < m; j++) { cout << arr[j] << " "; } cout << endl; } return 0; } ``` 在上面的代码中，首先输入了数据组数 `n`，然后使用一个循环遍历每一组数据。在遍历每一组数据时，先输入每组数据的长度 `m`，然后定义一个长度为 `m` 的数组 `arr`，再循环输入每组数据的元素。最后处理每组数据并输出。 ### 回答2： 要使用数组实现输入多组数据，我们可以按照以下步骤进行： 1. 创建一个二维数组，其中的每一行表示一组数据，每一列表示该组数据中的一个元素。 2. 设定输入的组数，可以通过用户输入或者其他方式确定。 3. 创建一个循环，该循环的次数等于输入的组数。 4. 在循环中，为每一组数据的每个元素逐个赋值。 5. 在赋值过程中，可以通过获取用户输入、从文件中读取数据等方式获取每个元素的值。 6. 将每一组数据存储到二维数组的对应行中。 7. 循环结束后，可以通过遍历二维数组，逐个输出每一组数据。 下面是一个示例代码，以数组实现输入两组数据并输出的情况： ```python import numpy as np # 创建一个空的二维数组，用来存储输入的多组数据 array = np.empty((2, 3), dtype=int) # 输入组数 groups = 2 # 通过循环为每一组数据的每个元素逐个赋值 for i in range(groups): print("请输入第{}组数据:".format(i+1)) for j in range(3): # 获取用户输入 value = int(input("请输入第{}个元素的值:".format(j+1))) array[i][j] = value # 输出每一组数据 for i in range(groups): print("第{}组数据:".format(i+1)) for j in range(3): # 遍历二维数组，输出每个元素的值 print(array[i][j]) ``` 通过以上步骤，我们可以使用数组实现输入多组数据，并按照需要对这些数据进行处理和输出。 ### 回答3： 要使用数组实现输入多组数据，可以采取以下步骤： 1. 首先，确定变量容纳数据的数组的大小。根据需要输入的多组数据的个数和每组数据元素的数量，创建一个二维数组，例如arr[m][n]，其中m表示多组数据的个数，n表示每组数据的元素数量。 2. 接下来，使用循环结构，循环读取每组数据的元素。可以使用嵌套的for循环，外层循环用于遍历多组数据的索引，内层循环用于读取每组数据的元素。 3. 在循环中调用输入函数，如scanf()，根据需求输入数据的类型，读取元素的值，并将其存储到数组的相应位置上。 例如，使用scanf("%d", &arr[i][j])，表示读取整数，并将其存储到数组的第i组数据的第j个元素位置上。 4. 在循环结束后，即完成所有输入，可以通过访问数组的方式来查看每组数据的值。 下面是一个示例代码，用于演示如何使用数组实现输入多组数据： ``` #include <stdio.h> int main() { int m, n; printf("请输入多组数据的个数m和每组数据的元素数量n："); scanf("%d %d", &m, &n); int arr[m][n]; for (int i = 0; i < m; i++) { printf("请输入第%d组数据的%d个元素：", i + 1, n); for (int j = 0; j < n; j++) { scanf("%d", &arr[i][j]); } } printf("输入的多组数据为：\n"); for (int i = 0; i < m; i++) { for (int j = 0; j < n; j++) { printf("%d ", arr[i][j]); } printf("\n"); } return 0; } ``` 使用该示例代码，可以按照提示输入多组数据，并将其存储到二维数组中。最后，输出输入的多组数据以验证输入是否正确。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值