bootstrap中怎么實現一個搜索框

本篇文章為大家展示了bootstrap中怎么實現一個搜索框，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

先簡單看下對于這個控件官方的說明

Input groupEasily 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

意思就是針對我們平常使用的表單提交功能，可以添加按鈕，文本到輸入欄的兩邊的位置。

下面的Contents的七個內容就是它能實現的幾個基本功能，這里我們關注第四個button addons就可以了，其它的如果有興趣可以自行學習。

Button addonsButtons 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中怎么實現一個搜索框，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。