首頁  >  文章  >  web前端  >  bootstrap中搜尋框怎麼做

bootstrap中搜尋框怎麼做

爱喝马黛茶的安东尼
爱喝马黛茶的安东尼原創
2019-07-13 14:24:0319229瀏覽

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>

最後出現的效果如下所示

bootstrap中搜尋框怎麼做

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

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

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn