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>當然，其中按鈕的樣式你可以參考按鈕元素樣式進行設定對應的顏色。