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