Bootstrap<基础十五> 输入框组
本文共 3294 字，大约阅读时间需要 10 分钟。
原文: 
Bootstrap 支持的另一个特性，输入框组。输入框组扩展自 。使用输入框组，可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。
通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。
向 .form-control 添加前缀或后缀元素的步骤如下：
- 把前缀后后缀元素放在一个带有 class .input-group 的 <div> 中。
- 接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
- 把该 <span> 放置在 <input> 元素的前面或者后面。
为了保持跨浏览器的兼容性，请避免使用 <select> 元素，因为它们在 WebKit 浏览器中不能完全渲染出效果。也不要直接向表单组应用输入框组的 class，输入框组是一个孤立的组件。
基本的输入框组
下面的实例演示了基本的输入框组：
Bootstrap 实例 - 基本的输入框组
结果如下所示：
输入框组的大小
您可以通过向 .input-group 添加相对表单大小的 class（比如 .input-group-lg、input-group-sm、input-group-xs）来改变输入框组的大小。输入框中的内容会自动调整大小。
下面的实例演示了这点：
Bootstrap 实例 - 输入框组的大小
结果如下所示：
复选框和单选插件
可以把复选框和单选插件作为输入框组的前缀或者后缀元素，如下面的实例所示：
Bootstrap 实例 - 输入框组的复选框和单选插件
结果如下所示：
按钮插件
也可以把按钮作为输入框组的前缀或者后缀元素，这个时候您就不是添加 .input-group-addon class，您需要使用 class .input-group-btn 来包裹按钮。这是必需的，因为默认的浏览器样式不会被重写。下面的实例演示了这点：
Bootstrap 实例 - 输入框组的按钮插件
结果如下所示：
带有下拉菜单的按钮
在输入框组中添加带有下拉菜单的按钮，只需要简单地在一个 .input-group-btn class 中包裹按钮和下拉菜单即可，如下面的实例所示：
Bootstrap 实例 - 输入框组的下拉菜单按钮
结果如下所示：
分割的下拉菜单按钮
在输入框组中添加带有下拉菜单的分割按钮，使用与下拉菜单按钮大致相同的样式，但是对下拉菜单添加了主要的功能，如下面的实例所示：
Bootstrap 实例 - 输入框组中分割的下拉菜单按钮
结果如下所示：
系列文章：
转载地址：http://yomjo.baihongyu.com/
你可能感兴趣的文章
设计模式C++学习笔记之三（Singleton单例模式）
查看>>
【Oracle学习笔记-4】内连接和外连接的区别
查看>>
CSS初始化示例代码
查看>>
管道的故事（转）
查看>>
基于jquery响应式网站图片无限加载瀑布流布局
查看>>
关于开源的金玉良言
查看>>
Library Cache: Lock, Pin and Load Lock
查看>>
python查询mysql中文乱码问题
查看>>
JellyViewPager
查看>>
Linux守护进程的编程实现
查看>>
深入PHP内核之ZVAL
查看>>
T3 - 构建大型 Web 应用的 JavaScript 框架
查看>>
【书评:Oracle查询优化改写】第三章
查看>>
错误代码：ERR_UNSAFE_PORT
查看>>
Android中Parcelable与Serializable接口用法
查看>>
【angularjs】【学习心得】路由继续研究篇
查看>>
装饰模式
查看>>
LESS CSS 框架简介(转)
查看>>
Partition List -- LeetCode
查看>>
探秘腾讯Android手机游戏平台之不安装游戏APK直接启动法
查看>>