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实现弹性搜索框的全部叙述,希望对大家有所帮助,如果大家想了解更多内容敬请关注毛票票网站!