Bootstrap 支持的另一個特性，輸入框組。輸入框組擴展自表單控件。使用輸入框組，可以很容易地向基於文本的輸入框添加作為前綴和後綴的文本或按鈕。
向輸入域添加前綴和後綴的內容
<div style="padding: 100px 100px 10px;"><form role="form"><div><span>@</span><input type="text" placeholder="twitterhandle"></div><br><div><input type="text"><span>.00</span></div><br><div><span>$</span><input type="text"><span>.00</span></div></form></div>
複選框和單選插件作為輸入框組的前綴或者後綴元素
<div style="padding: 100px 100px 10px;"><form role="form"><div><div><div><span><input type="checkbox"></span><input type="text"></div><!-- /input-group --></div><!-- /.col-lg-6 --><br><div><div><span><input type="radio"></span><input type="text"></div><!-- /input-group --></div><!-- /.col-lg-6 --></div><!-- /.row --></form></div>
按鈕作為輸入框組的前綴或者後綴元素
<div style="padding: 100px 100px 10px;"><form role="form"><div><div><div><span><button type="button">Go!</button></span><input type="text"></div><!-- /input-group --></div><!-- /.col-lg-6 --><br><div><div><input type="text"><span><button type="button">Go!</button></span></div><!-- /input-group --></div><!-- /.col-lg-6 --></div><!-- /.row --></form></div>class="input-group-btn"<div><div><button type="button" data-toggle="dropdown">下拉菜單<span></span></button><ul><li><a href="#">功能</a></li><li><a href="#">另一個功能</a></li><li><a href="#">其他</a></li><li></li><li><a href="#">分離的鏈接</a></li></ul></div><!-- /btn-group --><input type="text"></div><!-- /input-group --><div><div><button type="button" data-toggle="dropdown"><span></span> GO<span></span></button><ul><li>下拉菜單標題</li><li><a href="#">A</a></li><li><</li><li><a href="#">B</a></li></ul> </div><input type="text"> </div><br><div><div><button type="button"><span></span> GO</button> <button type="button" data-toggle="dropdown"><span></span></button><ul><li>下拉菜單標題</li><li><a href="#">A</a></li><li><</li><li><a href="#">B</a></li></ul> </div><input type="text"> </div><br>
以上所述是小編給大家介紹的bootstrap輸入框組代碼分享，希望對大家有所幫助！