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