Bootstrap入門（十一）組件5：輸入框組
1.為其中添加第一個輸入框
2.添加額外的元素
3.為用戶提供標識
4.改變輸入框的尺寸
5.為額外添加多選/單選框
6.與按鈕結合
7.與下拉菜單結合
先引入本地的CSS文件和JS文件（注：1.bootstrap是需要jQuery支持的。2.需要在<body>當中添加）
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="jquery-3.1.0.min.js" type="text/javascript"></script> <script src="bootstrap.min.js" type="text/javascript"></script>
通過在文本輸入框
<input> 前面、后面或是兩邊加上文字或按鈕，可以實現對表單控件的擴展。為
.input-group 賦予
.input-group-addon 類，可以給
.form-control 的前面或后面添加額外的元素。
只支持文本輸入框 <input>
這里請避免使用
<select> 元素，因為 WebKit 瀏覽器不能完全繪制它的樣式。
避免使用
<textarea> 元素，由於它們的
rows 屬性在某些情況下不被支持。
輸入框組中的工具提示和彈出框需要特別的設置
為
.input-group 中所包含的元素應用工具提示（tooltip）或popover（彈出框）時，必須設置
container: 'body' 參數，為的是避免意外的副作用（例如，工具提示或彈出框被激活后，可能會讓當前元素變得更寬或/和變得失去其圓角）。
操作：
先在從起div中建立一個輸入框組的div（ class="input-group" ）
<div class="container"> <div class="input-group"> ... </div> </div>
1.為其中添加第一個輸入框
先看下效果
<div class="container"> <div class="input-group"> <input type='text' class="form-control" placeholder="username"> </div> </div>
效果為：
2.添加額外的元素
是一個<span>標簽
<div class="container"> <div class="input-group"> <span class="input-group-addon">@</span> <input type='text' class="form-control" placeholder="username"> </div> </div>
效果：
3.為用戶提供標識
比如錢
<div class="input-group"> <span class="input-group-addon">$</span> <input type='text' class="form-control"> <span class="input-group-addon">.00</span> </div>
效果
4.改變輸入框的尺寸
同樣也有lg，sm等大小
<div class="input-group input-group-lg"> <input type='text' class="form-control"> </div> <div class="input-group"> <input type='text' class="form-control"> </div> <div class="input-group input-group-sm"> <input type='text' class="form-control"> </div>
效果，大小明顯區分
5.為額外添加多選/單選框
（注意用了柵格，這里是col-lg-6 ，放開截圖，在瀏覽器中會占屏幕的一半，詳細可看入門（二）柵格）（把type='checkbox' /type='radio' 放到<input>當中）
<div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class='input-group-addon'> <input type='checkbox'> </span> <input type='text' class="form-control"> </div> <div class="input-group"> <span class='input-group-addon'> <input type='radio'> </span> <input type='text' class="form-control"> </div> <div>
效果，課根據實際需要，添加不同個數，當然，前后都是可以放置的
6.與按鈕結合
只需要用<button>來代替<input>，注意，<span>中要用class='input-group-btn'來代替class='input-group-addon'，否則按鈕會大於輸入框，不美觀
<div class="input-group"> <span class='input-group-btn'> <button class="btn btn-default" type='button'>ASD</button> </span> <input type='text' class="form-control"> </div>
效果
7.與下拉菜單結合
（記得要引入JS文件）
<div class="input-group"> <div class='input-group-btn'> <button class="btn btn-default dropdown-toggle" type='button' data-toggle='dropdown'> ZXC <span class='caret'></span> </button> <ul class="dropdown-menu" role='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>
效果：
根據需要，也可以改成分裂式的下拉菜單。