Bootstrap是Twitter推出的一個用於前端開發的開源工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發,是一個CSS/HTML框架。
接下來通過本文給大家介紹Bootstrap實現彈性搜索框的代碼，一起看下吧。
<form action="" method="get"><div><input type="hidden" name="scope" value="1"><input name="key" autocomplete="off" type="text" placeholder="輸入要搜索的內容關鍵字" ><span><button type="submit"><span></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實現彈性搜索框的全部敘述，希望對大家有所幫助，如果大家想了解更多內容敬請關注武林網網站！