input-group两侧添加额外元素

使用input-group，轻松在输入框前后添加文本或者按钮元素，使用方法如下：

1.用一个

包裹住输入框input按钮。

2.给input加上class="form-control"样式。

3.在input的前/后添加一个,在span中添加文本或者其他元素。

如：左右边添加文本（效果如上图中第一个输入框所示）：

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

左边添加复选框：

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

左边添加单选按钮：

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

右边添加按钮（注意这时我们不再是在span中添加class .input-group-addon样式，而是添加input-group-btn。

<div class="input-group form-group">
   <input type="text" class="form-control"/>
   <span class="input-group-btn">
       button class="btn btn-primary">搜索</button>
   </span>
</div>

input-group表示一行
form-group表示一个文本加上一行，文本可以在这一行的左边或上边
input-group和input-group-addon一般会成对出现

运行效果如下：


上面代码运行结果如下：


运行效果如下: