Bootstrap 輸入框組

1. 基本的輸入框組

輸入框組是由表單擴展來的。使用輸入框組，咱們能夠向基於文本的輸入框添加前綴和後綴（能夠是文本或者按鈕），進而向用戶輸入添加公共的元素。

形如： 

由於輸入框組是由表單擴展來的，輸入框組的組件要放在<form>元素內。把輸入框組放在帶有.input-group的<div>容器中，其中前綴或後綴放在帶有.input-group-addon的<span>內，其實<span>放在<input>元素的前面就是前綴，放在其後面就是後綴。

代碼演示：

 1 <div>
 2     <form role="form">
 3         <div class="input-group">
 4             <span class="input-group-addon">前綴</span>
 5             <input class="form-control" type="text" placeholder="請輸入文本">
 6         </div><br>
 7         <div class="input-group">
 8             <input class="form-control" type="text" placeholder="請輸入文本">
 9             <span class="input-group-addon">後綴</span>                        
10         </div><br>
11         <div class="input-group">
12             <span class="input-group-addon">前綴</span>
13             <input class="form-control" type="text" placeholder="請輸入文本">
14             <span class="input-group-addon">後綴</span>                        
15         </div>
16     </form>
17 </div>

顯示：

2.輸入框組的大小

輸入框組的大小由類 .input-group-lg、.input-group-sm、.inupt-group-xs（不起做用）來調整。經過向上面的程序第3行和第11行添加類  .input-group-lg、.input-group-sm可獲得如下輸入框組。

3.複選框和單選插件

能夠把複選框和單選按鈕做爲輸入框組的前綴或後綴。代碼示例：

 1 <form role="form">
 2     <div class="input-group">
 3         <span class="input-group-addon"><input type="checkbox"></span>
 4         <input class="form-control" type="text" placeholder="請輸入文本">
 5     </div><br>
 6     <div class="input-group">
 7         <span class="input-group-addon"><input type="radio"></span>
 8         <input class="form-control" type="text" placeholder="請輸入文本">
 9     </div>
10 </form>

顯示以下：

4.按鈕插件

前綴或後綴放在帶有類 .input-group-btn 的<span>組價中。即

<div>
    <form role="form">
        <div class="input-group">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">前進</button>
            </span>
            <input type="text" class="form-control">
        </div><br>
        <div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">前進</button>
            </span>    
        </div>
    </form>
</div>

顯示以下（前進按鈕能夠點擊）：

5.帶有下拉菜單的按鈕

輸入框組的前綴或者後綴能夠是帶有下拉菜單的按鈕。添加方式只須要將帶有下拉菜單的按鈕放在前綴或後綴組件（.input-group-btn）中.代碼示例：

 1 <form role="form">
 2     <div class="form-group">
 3         <div class="input-group">
 4             <span class="input-group-btn">
 5                 <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
 6                 下拉按鈕1<span class="caret"></span></button>
 7                 <ul class="dropdown-menu">
 8                     <li><a href="#">下拉連接1</a></li>
 9                     <li><a href="#">下拉連接2</a></li>
10                     <li><a href="#">下拉連接3</a></li>
11                     <li class="divider"></li>
12                     <li><a href="#">分離連接</a></li>
13                 </ul>
14             </span>
15             <input type="text" class="form-control">
16         </div>
17     </div>
18     <div class="form-group">
19         <div class="input-group">
20             <input type="text" class="form-control">
21             <span class="input-group-btn">
22                 <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
23                 下拉按鈕2<span class="caret"></span></button>
24                 <ul class="dropdown-menu">
25                     <li><a href="#">下拉連接1</a></li>
26                     <li><a href="#">下拉連接2</a></li>
27                     <li><a href="#">下拉連接3</a></li>
28                     <li class="divider"></li>
29                     <li><a href="#">分離連接</a></li>
30                 </ul>
31             </span>
32         </div>
33     </div>
34 </form>

 第4~14行是前綴部分，第21~31是後綴部分，能夠把標籤<span>替換爲<div>.顯示結果以下：

 6.分割的下拉菜單按鈕

代碼示例:

 1 <div class="form-group">
 2     <div class="input-group">
 3         <span class="input-group-btn">
 4             <button type="button" class="btn btn-default">分割按鈕</button>
 5             <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
 6             <span class="caret"></span></button>
 7             <ul class="dropdown-menu">
 8                 <li><a href="#">下拉連接1</a></li>
 9                 <li><a href="#">下拉連接2</a></li>
10                 <li><a href="#">下拉連接3</a></li>
11                 <li class="divider"></li>
12                 <li><a href="#">分離連接</a></li>
13             </ul>
14         </span>
15         <input type="text" class="form-control">
16     </div>
17 </div>

顯示以下：