前面的話 　　有時，我們需要將文本輸入框(input group)和文件或者小icon組合在一起進行顯示， 我們稱之為addon。也就是通過在文本輸入框 <input> 前面、后面或是兩邊加上文字或按鈕，來實現對表單控件的擴展。本文將詳細介紹Bootstrap輸入框組 ...

1. 基本實例 　　通過在文本輸入框 <input> 前面、后面或是兩邊加上文字或按鈕，實現對表單控件的擴展。 　　.input-group包含.input-group-addon給 .form-control 的前面或后面添加額外的元素。 　　輸入框組只支持文本輸入框 < ...

...

< div class = "row" > < div class = "col-lg-6" > ...

效果如下: 實現代碼: ...

只支持文本輸入框 <input> 這里請避免使用 <select> 元素，因為 WebKit 瀏覽器不能完全繪制它的樣式。 避免使用 <textarea> 元素，由於它們的 rows 屬性在某些情況下不被支持。 將輸入框組嵌套到表單組或柵格相關 ...

Bootstrap 支持的另一個特性，輸入框組。輸入框組擴展自 表單控件。使用輸入框組，可以很容易地向基於文本的輸入框添加作為前綴和后綴的文本或按鈕。 通過向輸入域添加前綴和后綴的內容，您可以向用戶輸入添加公共的元素。例如，可以添加美元符號，或者在 Twitter 用戶名前添加 ...

一、輸入框組件 1、在 .input-group 框里 可分別左右兩側添加文字， <input> 用 .form-control 添加樣式。 2、文字元素用 span.inpt-group-addon 3、尺寸大小（從大到小）: input-group-lg 、默認 ...