在网站建设项目的一些相关表单元素中，我们常常会在一些input元素中加入额外的内容，例如input表单的标题、与input表单结合的按钮等样式。
这些对应样式在Bootstrap中同样提供了，让我们看看Bootstrap input元素组的使用方法。
input元素组基本样式
最基本的input元素组样式就是在input元素的左右加入图标或者单位，从而达到一些对应的功能效果。
让我们看看应该如何实现这个效果：<div class="input-group"> <span class="input-group-addon">￥</span> <input type="text" class="form-control"> <span class="input-group-addon">.00</span></div>以上代码的效果是，在input元素前放入一个元素，从而说明该input是作为人民币的输入框，后面的.00用来说明该金额应该是准确到小数点后两位。
怎么样，通过这种形式对input元素的解释说明是不是非常直观简单？
input元素组尺寸
和Bootstrap按钮元素以及Bootstrap按钮组样式一样，input元素组照样有对应的尺寸选择，你可以通过在最外层的div中调用input-group-lg或者input-group-sm来获得大尺寸以及小尺寸的input元素，例如：<div class="input-group input-group-lg"> <span class="input-group-addon">￥</span> <input type="text" class="form-control" placeholder="Username"></div>以上代码显示出来的就是input组的大尺寸样式。
input元素组与多选框单选框结合
当你想要在input元素前加入一个单选框或者多选框的时候，也能够非常容易地实现：<div class="input-group"> <span class="input-group-addon"> <input type="checkbox"> </span> <input type="text" class="form-control"></div>上述代码就是在input元素前面加入一个checkbox元素，radio元素的写法也与其类似。
input元素组与按钮相结合
input元素与按钮相结合最经典的例子就是搜索框了，如果你想要将搜索框和搜索按钮融合在一起，就可以采用这个方式实现：<div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" type="button">搜索</button> </span></div>当然，其中按钮的样式你可以参考按钮元素样式进行设定对应的颜色。
写在文章最后
除了以上几种与input元素结合的方式之外，类似按钮下拉列表等样式也同样可以与input元素结合，通过这样的方式调用，可以大大节约开发时间成本。