Bootstrap3制作搜索框樣式的方法
更新時(shí)間：2016年07月11日 10:18:56 作者：zacker
這篇文章主要介紹了Bootstrap3制作搜索框樣式的方法 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
Bootstrap3中的很多樣式，都是需要我們進(jìn)行摸索著學(xué)習(xí)的，在制作類似百度的素搜索框時(shí)，一開始會(huì)不知道怎么做，其實(shí)很簡(jiǎn)單，利用內(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è)很不錯(cuò)的搜索框。
以上所述是小編給大家介紹的Bootstrap3制作搜索框樣式的方法的全部敘述，希望對(duì)大家有所幫助，如果大家想了解更多內(nèi)容敬請(qǐng)關(guān)注腳本之家！
您可能感興趣的文章:
- AngularJS折疊菜單實(shí)現(xiàn)方法示例
- AngularJS動(dòng)態(tài)菜單操作指令
- angularjs+bootstrap菜單的使用示例代碼
- AngularJS實(shí)現(xiàn)樹形結(jié)構(gòu)(ztree)菜單示例代碼
- 實(shí)例詳解AngularJS實(shí)現(xiàn)無限級(jí)聯(lián)動(dòng)菜單
- AngularJs中Bootstrap3 datetimepicker使用實(shí)例
- Bootstrap3 多選和單選框(checkbox)
- Bootstrap3 datetimepicker控件使用實(shí)例
- 購(gòu)物車前端開發(fā)（jQuery和bootstrap3）
- AngularJS+Bootstrap3多級(jí)導(dǎo)航菜單的實(shí)現(xiàn)代碼
相關(guān)文章
如何使用JS獲取當(dāng)前節(jié)點(diǎn)的兄弟/父/子節(jié)點(diǎn)
在日常的網(wǎng)頁(yè)開發(fā)中,我們會(huì)遇到獲取節(jié)點(diǎn)的問題,而js是寫網(wǎng)頁(yè)的最基礎(chǔ)的語言,也是最常用的,這篇文章主要給大家介紹了關(guān)于如何使用JS獲取當(dāng)前節(jié)點(diǎn)的兄弟/父/子節(jié)點(diǎn)的相關(guān)資料,需要的朋友可以參考下2023-04-04
JavaScript是一個(gè)絕冠全球的編程語言，可用于Web開發(fā)、移動(dòng)應(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的全屏操控,瀏覽器兼容的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
使用JavaScript修改瀏覽器URL地址欄的實(shí)現(xiàn)代碼
這篇文章主要介紹了如何使用JavaScript修改瀏覽器URL地址欄，需要的朋友可以參考下2013-10-10
js點(diǎn)擊頁(yè)面其它地方將某個(gè)顯示的DIV隱藏
今天一朋友問我 點(diǎn)擊一按鈕彈出一個(gè)DIV，然后要求點(diǎn)擊頁(yè)面其它地方隱藏這個(gè)DIV2012-07-07
小程序hover-class點(diǎn)擊態(tài)效果實(shí)現(xiàn)
這篇文章主要介紹了小程序hover-class點(diǎn)擊態(tài)效果實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要為大家詳細(xì)介紹了Openlayers實(shí)現(xiàn)聚合標(biāo)注，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web開發(fā)更加快捷。本文給大家分享Bootstrap精簡(jiǎn)教程，對(duì)Bootstrap精簡(jiǎn)教程感興趣的朋友一起學(xué)習(xí)2015-11-11
npm install報(bào)錯(cuò)無法創(chuàng)建packge.json文件的解決辦法
當(dāng)你在運(yùn)行 npm install 時(shí)遇到錯(cuò)誤,提示無法找到 package.json 文件,也沒有創(chuàng)建一個(gè) package.json 文件,只創(chuàng)建了一個(gè)package-lock.json文件,本文給大家介紹詳細(xì)的解決辦法,需要的朋友可以參考下2024-02-02