今天我们来学习输入框组，什么是输入框组呢？输入框组就是带有前缀或者后缀的文本输入框(这个前缀和后缀可以是文本符号或者按钮)。通过向输入域添加前缀后缀的内容，你可以向用户添加公共的元素，比如在输入邮箱时的@，描述金钱的美元符。
向form-control添加前缀或者后缀的步骤如下：
- 把前缀后缀放在一个带有class="input-group"的<div>中
- 放置文本符号的<span>中class=“input-group-addon”而且要放在上一条的<div>中
- 前缀=<span>在<input>前，后缀=<span>在<input>之前
基本的输入框组
<div class="row" style="padding: 100px 100px 10px">
<form>
<div class="input-group col-sm-3">
<span class="input-group-addon">
@
</span>
<input type="text" placeholder="输入你的邮箱" class="form-control">
</div>
<br>
<div class="input-group col-sm-3">
<span class="input-group-addon">
@
</span>
<input type="text" class="form-control" placeholder="输入你的邮箱">
</div>
<br>
<div class="input-group col-sm-3">
<input type="text" placeholder="输入百分比" class="form-control">
<span class="input-group-addon">
%
</span>
</div>
<br>
<button type="button" class="btn btn-primary">
<span>登录</span>
</button>
</form>
</div>代码解读：建立一个输入框组的形式如下：
<div class="input-group">
<span class="input-group-addon">*</span>
<input type="text" class="form-control">
</div>在我们上面编写的代码中，共有三个<div>，第一个<div>和第二个<div><span>在<input>前，所以是前缀，第三个<div>为后缀。
运行结果：
输入框组的大小
通过在<div class="input-group">中的预定义类class="input-group-lg或者input-group-md或input-group-xs或input-group-sm"可以改变输入框组的大小
<div class="input-group col-sm-3">
<span class="input-group-addon">
@
</span>
<input type="text" placeholder="原始的" class="form-control">
</div>
<br>
<div class="input-group input-group-lg col-sm-3">
<span class="input-group-addon">
@
</span>
<input type="text" class="form-control" placeholder="改变后的">
</div>代码解读：我们定义了两个输入框组，一组用于表示原始的输入框组，另一组表示改变大小后的输入框组。
复选框和单选框
可以将单选框或许复选框作为输入框的前缀或者后缀元素
<div class="input-group col-sm-3">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" placeholder="单选框radio" class="form-control">
</div>
<br>
<div class="input-group col-sm-3">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control" placeholder="复选框checkbox">
</div>代码解读：我们定义了两个<div>，第一个<div>中<span>放了单选框<input tyoe="radio">，第二个<div>中<span>放了复选框<input type="checkbox">
运行结果
按钮作为前缀后缀元素
前面我们提到过，<span>中可以放置文本按钮符号等，那么接下来我们就学习按钮作为输入框组的前缀或者后缀元素，
要将按钮作为输入框组的前缀后缀元素并不难跟之前的是一样的，但是！！！此时，<span>中的class不再是"input-group-addon"而是"input-group-btn"，否则会破坏输入框组的结构
<div class="input-group col-sm-3">
<input type="text" placeholder="点击登录" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-primary">
<span>登录</span>
</button>
</span>
</div>代码解读：此时的结构跟之前的结构是一样的，但是，<span>中class="input-group-btn"
运行结果
下拉菜单的输入框组
我们可以通过一个包含class="input-group-btn"的父类，将下拉菜单的<button>以及下拉列表的<ul>放入即可
<div class="row" style="padding: 100px 100px 10px">
<form>
<div class="input-group col-sm-3">
<input type="text" placeholder="点击展开下拉菜单" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
下拉菜单<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">Java</a>
</li>
<li>
<a href="#">C#</a>
</li>
<li>
<a href="#">Php</a>
</li>
<li class="divider"></li>
<li>
<a href="#">linux</a>
</li>
</ul>
</span>
</div>
<div class="input-group col-sm-3">
<div class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
下拉列表
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">Java</a>
</li>
<li>
<a href="#">C#</a>
</li>
<li>
<a href="#">Php</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">linux</a>
</li>
</ul>
</div>
<input type="text" class="form-control">
</div>
</form>
</div>代码解读：要想用下拉菜单作为输入框组的前缀后缀元素，也非常简单就跟将按钮放置在输入框组中是一样的（当然此处的<span>也是一样的class="input-group-btn"）
运行结果
注意，在上面第二处的输入框组我们没有用<span>而是用<div class="input-group-btn">这也是正确的！！！
切割类型的下拉菜单输入组框
我们之前在按钮下拉菜单的时候就学过如何制作一个切割类型的下拉菜单，通过两个<button>，一个表示下拉菜单文本，另一个表示点击时产生子菜单。要想将这个跟输入框组结合到一起也是非常简单的，就跟之前的下拉菜单一样
<div class="input-group col-sm-3">
<div class="input-group-btn">
<button type="button" class="btn btn-primary">
下拉列表
</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">Java</a>
</li>
<li>
<a href="#">C#</a>
</li>
<li>
<a href="#">Php</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">linux</a>
</li>
</ul>
</div>
<input type="text" class="form-control">
</div>代码解读：我们这次制作下拉菜单，并没有使用<div class="btn-group">，但是达到了同样的效果，
运行结果
字体图标输入框组
利用字体图标作为输入框组的前缀或者后缀，这跟之前的格式一样，也就是
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon *"></span>
<span>
<input type="text" class="from-control"> 总结
文本符号的（普通）输入框组格式
<div class="input-group">
<span class="input-group-addon">
<span>
<input type="text" class="from-control">
</div><span>中填写文本或者符号
按钮的输入框组格式
普通输入框格式中<span class="input-group-btn">，按钮同样在<span>中，注意这里的<span>可以换成<div>
下拉菜单的输入框格式
按钮输入框组中<span>中编写下拉菜单
注：本篇文章为博主在菜鸟教程学习的日记，菜鸟教程：http://www.runoob.com/