1. 基本實例
通過在文本輸入框 <input> 前面、后面或是兩邊加上文字或按鈕,實現對表單控件的擴展。
.input-group包含.input-group-addon給 .form-control 的前面或后面添加額外的元素。
輸入框組只支持文本輸入框 <input>,避免使用 <select>、<textarea>。
1.1 示例代碼
<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>
1.2 示例效果
2. 尺寸
.input-group 添加.input-group-*尺寸類設置尺寸。
2.1 示例代碼
<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>
2.2 示例效果
3. 按鈕額外元素
3.1 示例代碼
<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>
3.2 示例效果
4. 按鈕式下拉菜單額外元素
4.1 示例代碼
<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>
4.2 示例效果
5. 分裂式按鈕下拉菜單額外元素
5.1 示例代碼
<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>