bootstrap中搜尋框怎麼做

在專案開發過程中，我們或多或少都會使用到搜尋選項，那麼如何製作一個標準，好看的搜尋框呢？ 這裡推薦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中文網其他相關文章！