Bootstrap实现弹性搜索框
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师MarkOtto和JacobThornton合作开发,是一个CSS/HTML框架。
接下来通过本文给大家介绍Bootstrap实现弹性搜索框的代码，一起看下吧。
<formaction=""method="get"class="form-horizontal"> <divclass="input-groupsearch-input-group"> <inputtype="hidden"name="scope"value="1"> <inputname="key"autocomplete="off"type="text"class="form-control"placeholder="输入要搜索的内容关键字"> <spanclass="input-group-addon"> <buttontype="submit"> <spanclass="glyphiconglyphicon-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:000;
border-color:#ccc;
}
.search-input-group{
width:40%;
}
.search-input-groupbutton{
border:0;
background:transparent;
}
.search-input-groupinput:focus+button{
z-index:3;
}
.search-input-groupinput{
-webkit-transition:width0.2sease-in-out;
-moz-transition:width0.2sease-in-out;
-o-transition:width0.2sease-in-out;
transition:width0.2sease-in-out;
}
.search-input-groupinput:focus{
width:500px;
}
若想把搜索图标放到输入框的前面，bootstrap其实是不支持的，需要自己定制一下。
http://bootsnipp.com/snippets/featured/support-glyph-and-fa-icon-inside-input
以上所述是小编给大家介绍的Bootstrap实现弹性搜索框的全部叙述，希望对大家有所帮助，如果大家想了解更多内容敬请关注毛票票网站！