快捷導(dǎo)航

Bootstrap實現(xiàn)彈性搜索框

更新時間：2016年07月11日 10:06:36 投稿：mrr

這篇文章主要介紹了Bootstrap實現(xiàn)彈性搜索框的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

Bootstrap是Twitter推出的一個用于前端開發(fā)的開源工具包。它由Twitter的設(shè)計師Mark Otto和Jacob Thornton合作開發(fā),是一個CSS/HTML框架。

接下來通過本文給大家介紹Bootstrap實現(xiàn)彈性搜索框的代碼，一起看下吧。

<form action="" method="get" class="form-horizontal">
<div class="input-group search-input-group">
<input type="hidden" name="scope" value="1">
<input name="key" autocomplete="off" type="text" class="form-control" placeholder="輸入要搜索的內(nèi)容關(guān)鍵字" >
<span class="input-group-addon">
<button type="submit">
<span class="glyphicon glyphicon-search"></span>
</button> 
</span>
</div>
</form>

對應(yīng)的CSS：

.search-input-group .input-group-addon{
background: white !important; 
}
.search-input-group .form-control{
border-right:0; 
box-shadow:0 0 0; 
border-color:#ccc;
}
.search-input-group{
width: 40%;
}
.search-input-group button{
border:0;
background:transparent;
}
.search-input-group input:focus + button{
z-index:3;
}
.search-input-group input{
-webkit-transition: width 0.2s ease-in-out;
-moz-transition:width 0.2s ease-in-out;
-o-transition: width 0.2s ease-in-out;
transition: width 0.2s ease-in-out;
}
.search-input-group input:focus{
width: 500px;
}

若想把搜索圖標放到輸入框的前面，bootstrap其實是不支持的，需要自己定制一下。

http://bootsnipp.com/snippets/featured/support-glyph-and-fa-icon-inside-input

以上所述是小編給大家介紹的Bootstrap實現(xiàn)彈性搜索框的全部敘述，希望對大家有所幫助，如果大家想了解更多內(nèi)容敬請關(guān)注腳本之家網(wǎng)站！

您可能感興趣的文章:

相關(guān)文章

js window.print實現(xiàn)打印特定控件或內(nèi)容
window.print可以打印網(wǎng)頁，但有時候我們只希望打印特定控件或內(nèi)容，怎么辦呢？可以把要打印的內(nèi)容放在div中，然后用下面的代碼進行打印，希望對大家有所幫助
2013-09-09
讓html頁面不緩存js的實現(xiàn)方法
這篇文章主要介紹了讓html頁面不緩存js的實現(xiàn)方法,分析了HTML頁面緩存js的原理,并由此分析實現(xiàn)不緩存js的方法,是非常實用的技巧,需要的朋友可以參考下
2014-10-10
React+Typescript實現(xiàn)倒計時Hook的方法
本文主要介紹了React+Typescript實現(xiàn)倒計時Hook的方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
js定義類的幾種方法(推薦)
下面小編就為大家?guī)硪黄猨s定義類的幾種方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
JavaScript DOM節(jié)點操作方法總結(jié)
下面小編就為大家?guī)硪黄狫avaScript DOM節(jié)點操作方法總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
微信小程序API—獲取定位的詳解
這篇文章主要介紹了微信小程序API獲取定位，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
詳細談?wù)凟S6中的symbol數(shù)據(jù)類型
這篇文章主要給大家介紹了關(guān)于ES6中symbol數(shù)據(jù)類型的相關(guān)資料,Symbol函數(shù)的特性是每一個Symbol函數(shù)的返回值都是唯一的,可以通過給symbol函數(shù)傳遞不同的參數(shù)產(chǎn)生具有不同標記的值,需要的朋友可以參考下
2021-08-08
微信小程序多行文本顯示...+顯示更多按鈕和收起更多按鈕功能
這篇文章主要介紹了微信小程序多行文本顯示...+顯示更多按鈕和收起更多按鈕,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-09-09
淺談MUI框架中加載外部網(wǎng)頁或服務(wù)器數(shù)據(jù)的方法
下面小編就為大家分享一篇淺談MUI框架中加載外部網(wǎng)頁或服務(wù)器數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
JavaScript高級程序設(shè)計閱讀筆記（十七） js事件
IE中是冒泡型事件，即從最特定的事件目標到最不特定的事件目標
2012-08-08