本篇文章為大家展示了bootstrap中怎么實(shí)現(xiàn)一個(gè)搜索框，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

10年積累的網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有拉薩免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

先簡(jiǎn)單看下對(duì)于這個(gè)控件官方的說明

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

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

下面的Contents的七個(gè)內(nèi)容就是它能實(shí)現(xiàn)的幾個(gè)基本功能，這里我們關(guān)注第四個(gè)button addons就可以了，其它的如果有興趣可以自行學(xué)習(xí)。

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和普通的不一樣，它需要一個(gè)不一樣的嵌套層次。其實(shí)簡(jiǎn)單來說，就是我們不再使用input-group-addon，而使用input-group-btn來管理按鈕，我給出的demo代碼如下所示：

                                  查找               添加