bootstrap中搜尋框怎麼做

在專案開發過程中，我們或多或少都會使用到搜尋選項，那麼如何製作一個標準，好看的搜尋框呢？這裡推薦bootstrap自帶的一個控制項input-group。

推薦手冊： Bootstrap 中文手冊

先簡單看下對於這個控制項官方的說明

Input group Easily extend form controls by adding text, buttons, or button groups on either side of textual 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程式碼如下所示：

   查找 添加  

最後出現的效果如下所示

這樣就很完美的顯示出了搜尋列的選項，且風格保持了一致。

相關文章推薦：
1. Bootstrap Table 搜尋框與查詢功能詳解
2. bootStrap-table伺服器端後台分頁及自訂搜尋框的實作的使用
相關影片推薦：
1. 獨孤九賤(7)_Bootstrap影片教學

以上是bootstrap中搜尋框怎麼做的詳細內容。更多資訊請關注PHP中文網其他相關文章！