1. 基本实例

  通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮,实现对表单控件的扩展。

  .input-group包含.input-group-addon.form-control 的前面或后面添加额外的元素。

  输入框组只支持文本输入框 <input>,避免使用 <select>、<textarea>。

1.1 示例代码

<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" />
</div>
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-addon">.00</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" />
<span class="input-group-addon">.00</span>
</div>

1.2 示例效果

2. 尺寸

  .input-group 添加.input-group-*尺寸类设置尺寸。

2.1 示例代码

<div class="input-group input-group-lg">
<span class="input-group-addon">@</span>
<input type="text" class="form-control">
</div>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">@</span>
<input type="text" class="form-control">
</div>

2.2 示例效果

3. 按钮额外元素

3.1 示例代码

<div class="input-group">
<input type="text" class="form-control" placeholder="请输入关键字">
<span class="input-group-btn">
<input type="submit" class="btn btn-default" value="查询" />
</span>
</div>

3.2 示例效果

4. 按钮式下拉菜单额外元素

4.1 示例代码

<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default 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>
<input type="text" class="form-control">
</div>

4.2 示例效果

5. 分裂式按钮下拉菜单额外元素

5.1 示例代码

<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default">
下拉菜单
</button>
<button class="btn btn-default 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>
<input type="text" class="form-control">
</div>

5.2 示例效果

Bootstrap3系列:输入框组的更多相关文章

  1. Bootstrap<基础十五> 输入框组

    Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输 ...

  2. Bootstrap历练实例:基本输入框组

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. bootstrap历练实例:复选框或单选按钮作为输入框组的前缀或后缀

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  4. Bootstrap历练实例:输入框组的大小

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. bootstrap历练实例:按钮作为输入框组前缀或后缀

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  6. bootstrap 列表 表格 表单 复选 单选 多选 输入框组

    一.列表 ul li 二.表格 table  (http://www.runoob.com/bootstrap/bootstrap-tables.html) 1. 基本表格 <table cla ...

  7. Bootstrap入门(十一)组件5:输入框组

    Bootstrap入门(十一)组件5:输入框组   1.为其中添加第一个输入框 2.添加额外的元素 3.为用户提供标识 4.改变输入框的尺寸 5.为额外添加多选/单选框 6.与按钮结合 7.与下拉菜单 ...

  8. Bootstrap -- 下拉菜单、输入框组、导航菜单

    Bootstrap -- 下拉菜单.输入框组.导航菜单 1. 下拉菜单 可以使用带有各种大小按钮的下拉菜单:.btn-lg..btn-sm 或 .btn-xs. 实现下拉菜单: <!DOCTYP ...

  9. Bootstrap输入框组

    前面的话 有时,我们需要将文本输入框(input group)和文件或者小icon组合在一起进行显示, 我们称之为addon.也就是通过在文本输入框 <input> 前面.后面或是两边加上 ...

随机推荐

  1. .NET Core中的认证管理解析

    .NET Core中的认证管理解析 0x00 问题来源 在新建.NET Core的Web项目时选择“使用个人用户账户”就可以创建一个带有用户和权限管理的项目,已经准备好了用户注册.登录等很多页面,也可 ...

  2. [翻译]开发文档:android Bitmap的高效使用

    内容概述 本文内容来自开发文档"Traning > Displaying Bitmaps Efficiently",包括大尺寸Bitmap的高效加载,图片的异步加载和数据缓存 ...

  3. 第一个shell脚本

    打开文本编辑器,新建一个文件,扩展名为sh(sh代表shell),扩展名并不影响脚本执行,见名知意就好. #!/bin/bash echo "Hello World !" &quo ...

  4. WPF 微信 MVVM 【续】发送部分QQ表情

    今天主要记录的就是发送QQ表情, WPF 微信 MVVM里写了,后期为了发送QQ表情,需要把TextBox替换为RichTextBox,接下来就说说替换的过程. 一.支持Binding的RichTex ...

  5. 深入浅出Redis-redis哨兵集群

    1.Sentinel 哨兵 Sentinel(哨兵)是Redis 的高可用性解决方案:由一个或多个Sentinel 实例 组成的Sentinel 系统可以监视任意多个主服务器,以及这些主服务器属下的所 ...

  6. Hadoop学习之旅二:HDFS

    本文基于Hadoop1.X 概述 分布式文件系统主要用来解决如下几个问题: 读写大文件 加速运算 对于某些体积巨大的文件,比如其大小超过了计算机文件系统所能存放的最大限制或者是其大小甚至超过了计算机整 ...

  7. CRM 数据密钥 忘记 解决方案

    UPDATE EmailServerProfile SET IncomingPassword=nullUPDATE EmailServerProfile SET OutgoingPassword=nu ...

  8. App 审核由于 IPv6 网络问题被拒

    昨天 提交App Store 的时候被拒了 We discovered one or more bugs in your app when reviewed on iPhone running iOS ...

  9. TFS 生成发布代理

    下载Agent 后,执行配置命令     参考 安装TFS(2015)工作组模式代理服务器(Agent)

  10. Struts2数据校验

    Struts2数据校验 1.常见数据校验方法 表单数据的校验方式: 表单中的数据必须被效验以后才能够被使用,常用的效验方式分为两种: 前台校验:也称之为客户端效验,主要是通过JS编程的方式进行表单数据 ...