Bootstrap输入框组

向.form-control添加前缀或后缀元素的步骤如下：

（1）把前缀或后缀元素放在一个带有class.input-group的<div>中
（2）在相同的<div>内，在class为.input-group-addon的<span>内放置额外的内容
（3）把<span>放置在<input>元素的前面或者后面

1.基本输入框组

//邮箱输入框组，不用输入@ 和 .com
<div class="input-group">
<input type="text" class="form-control">//一个基本的输入框
<span class="input-group-addon">@</span>//添加的@
<input type="text" class="form-control">//一个基本的输入框
<span class="input-group-addon">.com</span>//添加后缀.com
</div>

可以通过 input-group-lg ,input-group-sm来控制输入框的大小

2.复选框和单选框

<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>//设置一个选项的按钮
<input type="text" class="form-control">
</div><!-- /input-group -->

//单选框
<span class="input-group-addon">
<input type="radio">
</span>

3.按钮插件

把按钮作为输入框的前缀或者后缀元素，不是添加.input-group-addon而是需要class .input-group-btn

<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">//增加一个按钮，显示为Go!
Go!
</button>
</span>
</div><!-- /input-group -->

4.带有下拉菜单的按钮

<div class="input-group"> //输入的为一组
<div class="input-group-btn">//增加一个按钮
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>//增加的按钮中显示下拉菜单和黑色小三角
</button>
<ul class="dropdown-menu">//下拉菜单中的内容
<li><a href="#">功能</a></li>
<li><a href="#">另一个功能</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">//输入框
</div><!-- /input-group -->