Bootstrap is an open source toolkit launched by Twitter for front-end development. It was developed by Twitter designer Mark Otto and Jacob Thornton and is a CSS/HTML framework.
Next, through this article, I will introduce to you the code of Bootstrap to implement the elastic search box, let’s take a look.
<form action="" method="get"><div><input type="hidden" name="scope" value="1"><input name="key" autocomplete="off" type="text" placeholder="enter the content keyword to search" ><span><button type="submit"><span></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 it and you need to customize it yourself.
http://bootsnipp.com/snippets/featured/support-glyph-and-fa-icon-inside-input
The above is the full description of Bootstrap implementing elastic search box introduced to you by the editor. I hope it will be helpful to you. If you want to know more, please pay attention to the Wulin.com website!