通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。
向 .form-control 添加前缀或后缀元素的步骤如下：
把前缀后后缀元素放在一个带有 class .input-group 的 <div> 中。
接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
把该 <span> 放置在 <input> 元素的前面或者后面。
为了保持跨浏览器的兼容性，请避免使用 <select> 元素，因为它们在 WebKit 浏览器中不能完全渲染出效果。也不要直接向表单组应用输入框组的 class，输入框组是一个孤立的组件。
Bootstrap<基础十五> 输入框组Bootstrap 支持的另一个特性，输入框组。输入框组扩展自 表单控件。使用输入框组，可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。
下面的实例演示了基本的输入框组：
结果如下所示：
您可以通过向 .input-group 添加相对表单大小的 class（比如 .input-group-lg、input-group-sm、input-group-xs）来改变输入框组的大小。输入框中的内容会自动调整大小。
下面的实例演示了这点：
可以把复选框和单选插件作为输入框组的前缀或者后缀元素，如下面的实例所示：
也可以把按钮作为输入框组的前缀或者后缀元素，这个时候您就不是添加 .input-group-addon class，您需要使用 class .input-group-btn 来包裹按钮。这是必需的，因为默认的浏览器样式不会被重写。下面的实例演示了这点：
在输入框组中添加带有下拉菜单的按钮，只需要简单地在一个 .input-group-btn class 中包裹按钮和下拉菜单即可，如下面的实例所示：
在输入框组中添加带有下拉菜单的分割按钮，使用与下拉菜单按钮大致相同的样式，但是对下拉菜单添加了主要的功能，如下面的实例所示：
系列文章：
<a href="http://www.cnblogs.com/lansy/p/4334611.html%20" target="_blank">Bootstrap <基础一> css 概览</a>
<a href="http://www.cnblogs.com/lansy/p/4337381.html%20" target="_blank">Bootstrap<基础二>网络系统</a>
<a href="http://www.cnblogs.com/lansy/p/4339002.html%20" target="_blank">Bootstrap<基础三>排版</a>
<a href="http://www.cnblogs.com/lansy/p/4341498.html%20" target="_blank">Bootstrap<基础四> 代码</a>
<a href="http://www.cnblogs.com/lansy/p/4343823.html%20" target="_blank">Bootstrap <基础五>表格</a>
<a href="http://www.cnblogs.com/lansy/p/4346492.html">Bootstrap<基础六> 表单</a>
<a href="http://www.cnblogs.com/lansy/p/4355913.html%20" target="_blank">Bootstrap <基础七>按钮</a>
<a href="http://www.cnblogs.com/lansy/p/4380536.html%20" target="_blank">Bootstrap <基础八>图片</a>
<a href="http://www.cnblogs.com/lansy/p/4395706.html" target="_blank">Bootstrap<基础九>辅助类</a>
<a href="http://www.cnblogs.com/lansy/p/4397409.html%20" target="_blank">Bootstrap<基础十> 响应式实用工具</a>
<a href="http://www.cnblogs.com/lansy/p/4401476.html%20" target="_blank">Bootstrap<基础十一>字体图标(Glyphicons)</a>
<a href="http://www.cnblogs.com/lansy/p/4408654.html%20" target="_blank">Bootstrap <基础十二>下拉菜单（Dropdowns）</a>
<a href="http://www.cnblogs.com/lansy/p/4413528.html%20" target="_blank">Bootstrap<基础十三> 按钮组</a>
<a href="http://www.cnblogs.com/lansy/p/4423945.html%20" target="_blank">Bootstrap<基础十四> 按钮下拉菜单</a>
<a href="http://www.cnblogs.com/lansy/p/4427558.html%20" target="_blank">Bootstrap<基础十五> 输入框组</a>
<a href="http://www.cnblogs.com/lansy/p/4430985.html%20" target="_blank">Bootstrap<基础十六> 导航元素</a>
<a href="http://www.cnblogs.com/lansy/p/4433938.html%20" target="_blank">Bootstrap<基础十七>导航栏</a>
<a href="http://www.cnblogs.com/lansy/p/4440639.html%20" target="_blank">Bootstrap <基础十八>面包屑导航（Breadcrumbs）</a>
<a href="http://www.cnblogs.com/lansy/p/4440639.html%20" target="_blank">Bootstrap <基础十九>分页</a>
<a href="http://www.cnblogs.com/lansy/p/4446365.html%20" target="_blank">Bootstrap<基础二十> 标签</a>
<a href="http://www.cnblogs.com/lansy/p/4449345.html%20" target="_blank">Bootstrap <基础二十一>徽章（Badges）</a>
<a href="http://www.cnblogs.com/lansy/p/4452409.html%20" target="_blank">Bootstrap <基础二十二>超大屏幕（Jumbotron）</a>
<a href="http://www.cnblogs.com/lansy/p/4458972.html%20" target="_blank">Bootstrap <基础二十三>页面标题（Page Header）</a>
<a href="http://www.cnblogs.com/lansy/p/4462048.html%20" target="_blank">Bootstrap<基础二十四> 缩略图</a>
<a href="http://www.cnblogs.com/lansy/p/4475377.html%20" target="_blank">Bootstrap <基础二十五>警告（Alerts）</a>
<a href="http://www.cnblogs.com/lansy/p/4478334.html%20" target="_blank">Bootstrap <基础二十六>进度条</a>