Bootstrap3制作搜索框樣式的方法

更新時(shí)間：2016年07月11日 10:18:56 作者：zacker

這篇文章主要介紹了Bootstrap3制作搜索框樣式的方法的相關(guān)資料,非常不錯，具有參考借鑒價(jià)值，需要的朋友可以參考下

Bootstrap3中的很多樣式，都是需要我們進(jìn)行摸索著學(xué)習(xí)的，在制作類似百度的素搜索框時(shí)，一開始會不知道怎么做，其實(shí)很簡單，利用內(nèi)聯(lián)圖標(biāo)方式就可以實(shí)現(xiàn)

<div class="input-group">
<input type="text" class="form-control input-lg"><span class="input-group-addon btn btn-primary">搜索</span>
</div>

通過'.input-group'將span內(nèi)聯(lián)到輸入框，我們只需要在這個(gè)span上面加上按鈕的樣式，就可以實(shí)現(xiàn)一個(gè)很不錯的搜索框。

以上所述是小編給大家介紹的Bootstrap3制作搜索框樣式的方法的全部敘述，希望對大家有所幫助，如果大家想了解更多內(nèi)容敬請關(guān)注腳本之家！

您可能感興趣的文章:

相關(guān)文章

如何使用JS獲取當(dāng)前節(jié)點(diǎn)的兄弟/父/子節(jié)點(diǎn)
在日常的網(wǎng)頁開發(fā)中,我們會遇到獲取節(jié)點(diǎn)的問題,而js是寫網(wǎng)頁的最基礎(chǔ)的語言,也是最常用的,這篇文章主要給大家介紹了關(guān)于如何使用JS獲取當(dāng)前節(jié)點(diǎn)的兄弟/父/子節(jié)點(diǎn)的相關(guān)資料,需要的朋友可以參考下
2023-04-04
Web開發(fā)必知Javascript技巧大全
　JavaScript是一個(gè)絕冠全球的編程語言，可用于Web開發(fā)、移動應(yīng)用開發(fā)（PhoneGap、Appcelerator）、服務(wù)器端開發(fā)（Node.js和Wakanda）等等，通過本文給大家介紹Web開發(fā)必知Javascript技巧大全，需要的朋友參考下吧
2016-02-02
javascript實(shí)現(xiàn)的時(shí)間格式加8小時(shí)功能示例
這篇文章主要介紹了javascript實(shí)現(xiàn)的時(shí)間格式加8小時(shí)功能,涉及javascript日期時(shí)間轉(zhuǎn)換與運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下
2019-06-06
淺談javascript控制HTML5的全屏操控,瀏覽器兼容的問題
下面小編就為大家?guī)硪黄獪\談javascript控制HTML5的全屏操控,瀏覽器兼容的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-10-10
使用JavaScript修改瀏覽器URL地址欄的實(shí)現(xiàn)代碼
這篇文章主要介紹了如何使用JavaScript修改瀏覽器URL地址欄，需要的朋友可以參考下
2013-10-10
js點(diǎn)擊頁面其它地方將某個(gè)顯示的DIV隱藏
今天一朋友問我點(diǎn)擊一按鈕彈出一個(gè)DIV，然后要求點(diǎn)擊頁面其它地方隱藏這個(gè)DIV
2012-07-07
小程序hover-class點(diǎn)擊態(tài)效果實(shí)現(xiàn)
這篇文章主要介紹了小程序hover-class點(diǎn)擊態(tài)效果實(shí)現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-02-02
Openlayers繪制聚合標(biāo)注
這篇文章主要為大家詳細(xì)介紹了Openlayers實(shí)現(xiàn)聚合標(biāo)注，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
Bootstrap精簡教程
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web開發(fā)更加快捷。本文給大家分享Bootstrap精簡教程，對Bootstrap精簡教程感興趣的朋友一起學(xué)習(xí)
2015-11-11
npm install報(bào)錯無法創(chuàng)建packge.json文件的解決辦法
當(dāng)你在運(yùn)行 npm install 時(shí)遇到錯誤,提示無法找到 package.json 文件,也沒有創(chuàng)建一個(gè) package.json 文件,只創(chuàng)建了一個(gè)package-lock.json文件,本文給大家介紹詳細(xì)的解決辦法,需要的朋友可以參考下
2024-02-02