## 輸入框組 通過在文本輸入框 前面、后面或是兩邊加上文字或按鈕，可以實現對表單控件的擴展。為 .input-group 賦予 .input-group-addon 或 .input-group-btn 類，可以給 .form-control 的前面或后面添加額外的元素。 注意： **1.** 只支持文本輸入框`<input>` 這里請避免使用`<select>`元素和`<textarea>`元素，它們在某些情況下不被支持。 **2.** 不要和其他組件混用 不要將表單組或柵格列（column）類直接和輸入框組混合使用。而是將輸入框組嵌套到表單組或柵格相關元素的內部。 **基本實例** 在輸入框的任意一側添加額外元素或按鈕。你還可以在輸入框的兩側同時添加額外元素。 注意： **1.** 不支持在輸入框的單獨一側添加多個額外元素（`.input-group-addon`或`.input-group-btn`）。 **2.** 不支持在單個輸入框組中添加多個表單控件。 ```html <div class="input-group"> <span class="input-group-addon" id="abbon1">@</span> <input type="text" class="form-control" placeholder="username" aria-describedby="addon1"> </div> <div class="input-group"> <input type="text" class="form-control" placeholder="other username" aria-describedby="addon2"> <span class="input-group-addon" id="abbon2">@qq.com</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-lg / input-group-xs / input-group-sm)。 ```html <div class="input-group input-group-lg"> <span class="input-group-addon" id="abbon1">@</span> <input type="text" class="form-control" placeholder="username" aria-describedby="addon1"> </div> <div class="input-group input-group-xs"> <span class="input-group-addon" id="abbon1">@</span> <input type="text" class="form-control" placeholder="username" aria-describedby="addon1"> </div> <div class="input-group input-group-sm"> <span class="input-group-addon" id="abbon1">@</span> <input type="text" class="form-control" placeholder="username" aria-describedby="addon1"> </div> ```  ***** **作為額外元素的多選框和單選框** 可以將多選框或單選框作為額外元素添加到輸入框組中。 ```html <div class="row"> <div class="col-xs-6"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"> </span> <input type="text" class="form-control" /> </div> </div> <div class="col-xs-6"> <div class="input-group"> <span class="input-group-addon"> <input type="radio"> </span> <input type="text" class="form-control" /> </div> </div> </div> ```  ***** **作為額外元素的按鈕** 為輸入框組添加按鈕需要額外添加一層嵌套，不是`.input-group-addon`，而是添加`.input-group-btn`來包裹按鈕元素。 ```html <div class="row"> <div class="col-xs-6"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button">搜索</button> </span> <input type="text" class="form-control" placeholder="Search for..." /> </div> </div> <div class="col-xs-6"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."/> <span class="input-group-btn"> <button class="btn btn-default" type="button">搜索</button> </span> </div> </div> </div> ```  ***** **作為額外元素的按鈕式下拉菜單** 在輸入框組中嵌入按鈕式下拉菜單就可以了，可以參考 按鈕式下拉菜單 章節 ```html <div class="row"> <div class="col-xs-6"> <div class="input-group"> <div class="input-group-btn"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"> search <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="##">1</a></li> <li><a href="##">2</a></li> <li role="separator" class="divider"><a href="##"></a></li> <li><a href="##">4</a></li> </ul> </div> <input type="text" class="form-control" placeholder="Search for...""/> </div> </div> <div class="col-xs-6"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for...""/> <div class="input-group-btn"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"> search <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="##">1</a></li> <li><a href="##">2</a></li> <li role="separator" class="divider"><a href="##"></a></li> <li><a href="##">4</a></li> </ul> </div> </div> </div> </div> ```  ***** **作為額外元素的分裂式按鈕下拉菜單** ```html <div class="row"> <div class="col-xs-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default">search</button> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="##">1</a></li> <li><a href="##">2</a></li> <li role="separator" class="divider"><a href="##"></a></li> <li><a href="##">4</a></li> </ul> </div> <input type="text" class="form-control" placeholder="Search for...""/> </div> </div> </div> ```  ***** **多個按鈕** 雖然每側只能有一個.input組，但在一個.input組btn中可以有多個按鈕。，但在一個.input組btn中可以有多個按鈕( 根據項目的實際需求 )。 ```html <div class="row"> <div class="col-xs-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default" aria-label="bold"> <span class="glyphicon glyphicon-bold"></span> </button> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"> <span class="caret"></span> </button> </div> <input type="text" class="form-control" placeholder="Search for...""/> </div> </div> </div> ```