在專案開發過程中，我們或多或少都會使用到搜尋選項，那麼如何製作一個標準，好看的搜尋框呢？ 這裡推薦bootstrap自帶的一個控制項input-group。
推薦手冊：Bootstrap 中文手冊
先簡單看下對於這個控制項官方的說明
Input group
Easily extend form controls by adding text, buttons, or button groups on either side of textual <input>s.
Contents
Basic example
Sizing
Checkboxes and radio addons
Button addons
Buttons with dropdowns
Segmented buttons
Accessibility意思就是針對我們平常使用的表單提交功能，可以新增按鈕，文字到輸入列的兩邊的位置。
相關推薦：《bootstrap入門教程》
下面的Contents的七個內容就是它所能實現的幾個基本功能，這裡我們關注第四個button addons就可以了，其它的如果有興趣可以自行學習。
Button addons Buttons in input groups are a bit different and require one extra level of nesting. Instead of . input-group-addon, you’ll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.
上面一段話就是指，在input groups裡面的button和普通的不一樣，它需要一個不一樣的嵌套層次。其實簡單來說，就是我們不再使用input-group-addon，而使用input-group-btn來管理按鈕，我給的demo程式碼如下所示：
<div class="input-group col-md-3" style="margin-top:0px positon:relative">
<input type="text" class="form-control"placeholder="请输入字段名" / >
<span class="input-group-btn">
<button class="btn btn-info btn-search">查找</button>
<button class="btn btn-info btn-search" style="margin-left:3px">添加</button>
</span>
</div>最後出現的效果如下所示
這樣就很完美的顯示出了搜尋列的選項，且風格保持了一致。
相關文章推薦：
1.Bootstrap Table 搜尋框與查詢功能詳解
2.bootStrap-table伺服器端後台分頁及自訂搜尋框的實作的使用
相關影片推薦：
1.獨孤九賤(7)_Bootstrap影片教學
以上是bootstrap中搜尋框怎麼做的詳細內容。更多資訊請關注PHP中文網其他相關文章！
