Bootstrap是Twitter推出的一個用于前端開發的開源工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發,是一個CSS/HTML框架。
接下來通過本文給大家介紹Bootstrap實現彈性搜索框的代碼,一起看下吧。
<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="輸入要搜索的內容關鍵字" ><span class="input-group-addon"><button type="submit"><span class="glyphicon glyphicon-search"></span></button> </span></div></form>
對應的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實現彈性搜索框的全部敘述,希望對大家有所幫助,如果大家想了解更多內容敬請關注武林網網站!
新聞熱點
疑難解答