經過在文本輸入框 <input> 前面、後面或是兩邊加上文字或按鈕,實現對錶單控件的擴展。spa
.input-group包含.input-group-addon給 .form-control 的前面或後面添加額外的元素。3d
輸入框組只支持文本輸入框 <input>,避免使用 <select>、<textarea>。code
<div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" /> </div> <div class="input-group"> <input type="text" class="form-control" /> <span class="input-group-addon">.00</span> </div> <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-group 添加.input-group-*尺寸類設置尺寸。orm
<div class="input-group input-group-lg"> <span class="input-group-addon">@</span> <input type="text" class="form-control"> </div> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control"> </div> <div class="input-group input-group-sm"> <span class="input-group-addon">@</span> <input type="text" class="form-control"> </div>
<div class="input-group"> <input type="text" class="form-control" placeholder="請輸入關鍵字"> <span class="input-group-btn"> <input type="submit" class="btn btn-default" value="查詢" /> </span> </div>
<div class="input-group"> <div class="input-group-btn"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜單<span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">菜單項1</a></li> <li><a href="#">菜單項2</a></li> <li><a href="#">菜單項3</a></li> </ul> </div> <input type="text" class="form-control"> </div>
<div class="input-group"> <div class="input-group-btn"> <button class="btn btn-default"> 下拉菜單 </button> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">菜單項1</a></li> <li><a href="#">菜單項2</a></li> <li><a href="#">菜單項3</a></li> </ul> </div> <input type="text" class="form-control"> </div>