Bootstrap输入框组
前面的话
有时,我们需要将文本输入框(input group)和文件或者小icon组合在一起进行显示, 我们称之为addon。也就是通过在文本输入框 <input>
前面、后面或是两边加上文字或按钮,来实现对表单控件的扩展。本文将详细介绍Bootstrap输入框组
基本用法
在输入框的任意一侧添加额外元素或按钮。还可以在输入框的两侧同时添加额外元素
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div> <div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div> <div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div> <div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
【注意事项】
1、避免使用 <select>
元素,因为 WebKit 浏览器不能完全绘制它的样式
2、避免使用 <textarea>
元素,由于它们的 rows
属性在某些情况下不被支持
3、不要将表单组或栅格列(column)类直接和输入框组混合使用。而是将输入框组嵌套到表单组或栅格相关元素的内部
<h3>错误示范</h3>
<div class="input-group col-xs-4">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group col-xs-8">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<h3>正确示范</h3>
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-xs-8">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
</div>
4、可以添加多个(.input-group-addon
或 .input-group-btn
)
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
<span class="input-group-addon" id="basic-addon1">@</span>
</div>
5、不支持在单个输入框组中添加多个表单控件
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
尺寸
为 .input-group
添加相应的尺寸类,其内部包含的元素将自动调整自身的尺寸。不需要为输入框组中的每个元素重复地添加控制尺寸的类。提供了.input-group-lg和.input-group-sm,未提供超小型的样式,也许作者认为不需要
<div class="input-group input-group-lg">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
额外元素
【多选框或单选框】
可以将多选框或单选框作为额外元素添加到输入框组中
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div>
【按钮】
为输入框组添加按钮需要额外添加一层嵌套,不是 .input-group-addon
,而是添加 .input-group-btn
来包裹按钮元素。由于.btn按钮样式定义了各种各样的样式,其不像checkbox、radio、label等直接放到.input-group-addon样式里就可以的。所以,为了避免冲突,作者为.btn样式又单独设置了一个.input-group-btn样式,用来替换.input-group-addon作为新的addon容器
<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" placeholder="Search for...">
</div>
【按钮式下拉菜单】
很自然,能支持按钮,也就能支持按钮式下拉菜单,不需要额外的样式支持,只需要在普通的.btn按钮上应用一个data-toggle="dropdown"属性即可
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<input type="text" class="form-control" aria-label="...">
</div>
【分裂式按钮下拉菜单】
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default" type="button">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<input type="text" class="form-control" aria-label="...">
</div>
Bootstrap输入框组的更多相关文章
- bootstrap输入框组、导航和导航条
输入框组(input groups) 避免使用select 支持不好,使用输入框组 尺寸根据 input-group-lg input-group-sm来选择 <div class ...
- Bootstrap-CL:输入框组
ylbtech-Bootstrap-CL:输入框组 1.返回顶部 1. Bootstrap 输入框组 本章将讲解 Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组 ...
- Bootstrap<基础十五> 输入框组
Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输 ...
- bootstrap 列表 表格 表单 复选 单选 多选 输入框组
一.列表 ul li 二.表格 table (http://www.runoob.com/bootstrap/bootstrap-tables.html) 1. 基本表格 <table cla ...
- Bootstrap入门(十一)组件5:输入框组
Bootstrap入门(十一)组件5:输入框组 1.为其中添加第一个输入框 2.添加额外的元素 3.为用户提供标识 4.改变输入框的尺寸 5.为额外添加多选/单选框 6.与按钮结合 7.与下拉菜单 ...
- Bootstrap -- 下拉菜单、输入框组、导航菜单
Bootstrap -- 下拉菜单.输入框组.导航菜单 1. 下拉菜单 可以使用带有各种大小按钮的下拉菜单:.btn-lg..btn-sm 或 .btn-xs. 实现下拉菜单: <!DOCTYP ...
- 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除-改进版
上一次说到了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除 ,初始状态下只有一个输入框组,可以通过点击输入框组的右侧“+”(或自定义的文字)可以在原输入框组的下面 ...
- Bootstrap历练实例:基本输入框组
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- bootstrap历练实例:复选框或单选按钮作为输入框组的前缀或后缀
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
随机推荐
- Gazebo仿真
1.建议在本地Ubuntu 16.04下运行仿真程序.目前Gazebo模拟器的兼容性是一大问题,在虚拟机或配置较低的电脑上可能无法运行.如果你的显卡是N卡,建议安装Ubuntu下的显卡驱动. 2.运行 ...
- ASP 基础二 内置对象
一 Request 二 Response 三 Application 四 Session 五 Server <script language="vbscript" runat ...
- 用Qt程序打开.txt 文件的时候,出现乱码的情况
打开*.txt 文件出现乱码的情况,说明编码格式不对,一般的Windows下创建的txt 文件,到ubuntu 系统中打开会出现乱码的情况, 下面的代码读取文件,并且转化编码格式 void MainW ...
- Unable to execute dex: Multiple dex files defineLcom/google/gson/JsonDeserializer;
这是异常想必大家都知道的,是关于一个android jar包冲突的问题.为什么还要提呢,是因为这玩意真心让人蛋疼.有些时候稍微不注意(手贱)多导入一个包,就完蛋了.(jar包多的话搞不好带一上午调试) ...
- STL语法——集合:set 安迪的第一个字典(Andy's First Dictionary,UVa 10815)
Description Andy, , has a dream - he wants to produce his very own dictionary. This is not an easy t ...
- mysql分表操作
一般分表操作有垂直拆分和水平拆分.顾名思义. 1. 垂直拆分是指,这个表的列,即字段,要拆分成两个或多个表. 这个应用场景比如:这个表字段,几个都是int.datetime等,有那么一个是text类 ...
- mvn打包到私服的命令
1.mvn clean package install -Dmaven.test.skip=true deploy 2.docker清楚Nexus私服上包的命令: a) docker exec -it ...
- c#中的多线程异常 (转载)
1.对于Thread操作的异常处理 public static void Main() { try { Thread th = new Thread(DoWork); th.Start(); } ca ...
- 解决RobotFramework的关键字不能高亮的问题
一个可能的原因:路径中存在汉字,RobotFramework对这方面运行的不太好.
- 仓储层接口IBaseRepository解析
//代码调用由业务层调用,调用方式详见源代码的业务层,升级直接替换TT模板即可,无需覆盖系统using System; using System.Collections.Generic; using ...