_javascript technique of Bootstrap to realize elastic search box

Bootstrap is a Twitter-launched Open source Toolkit for front-end development. It was developed in collaboration with the Twitter designer Mark Otto and Jacob Thornton, a css/html framework.

Next through this article to introduce bootstrap to implement the flexible search box code, together look at it.

<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= "Enter the Content keyword to search for" >
<span class= "Input-group-addon" >
<button type= " Submit ">
<span class=" Glyphicon glyphicon-search ></span>
</button> 
</span >
</div>
</form>

Corresponding 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;
}

If you want to put the search icon in front of the input box, bootstrap actually does not support, you need to customize it.

Http://bootsnipp.com/snippets/featured/support-glyph-and-fa-icon-inside-input

The above is a small set to introduce the bootstrap to achieve a flexible search box all the narrative, I hope to help you, if you want to learn more content please pay attention to cloud Habitat community website!