Bootstrap—输入框组input-group

相信你在很多的网站页面上都看见过这样的输入框：

这样的输入框我们通过原生的手写css也能实现，但是使用Bootstrap的输入框组会让你实现起来更加简便。

实现在输入框前后添加元素的代码如下：

    
    
    


    

        

            

                @
                
                $
            
        
    

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

1.用一个

包裹住输入框input按钮。

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

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

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

    @
    
    $

左边添加复选框：

左边添加单选按钮：

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

 

            
                 
                     搜索
           
 

这样的组件很多情况下都会用到，比如说商城的搜索框等，我们可以通过改变button的颜色等样式来适应项目的需求。

本文参考资料来自：http://www.runoob.com/bootstrap/bootstrap-input-groups.html