Bootstrap input frame group code sharing _javascript Tips

Another feature supported by Bootstrap is the input box group. The input box group expands from the form control. With the input box group, you can easily add text or buttons as prefixes and suffixes to text-based input boxes.

Add a prefix and suffix to an input field

<div style= "padding:100px 100px 10px;" >
<form class= "bs-example bs-example-form" role= "form" >
<div class= "Input-group input-group-lg" >
<span class= "Input-group-addon" >@</span>
<input type= "text" class= "Form-control" Placeholder= "Twitterhandle" >
</div>
<br>
<div class= "Input-group" >
< Input type= "text" class= "Form-control" >
<span class= "Input-group-addon" >.00</span>
</ div>
<br>
<div class= "Input-group" >
<span class= "Input-group-addon" >$</ span>
<input type= "text" class= "Form-control" >
<span class= "Input-group-addon" >.00</ span>
</div>
</form>
</div>

check boxes and radio plug-ins as prefix or suffix elements for the input box group

<div style= "padding:100px 100px 10px;" >
<form class= "bs-example bs-example-form" role= "form" >
<div class= "Row" >
<div class= "Col-lg-6" >
<div class= "Input-group" >
<span class= "Input-group-addon" >
<input type= "checkbox" >
</span>
<input type= "text" class= "Form-control" >
</div><!--/ Input-group-->
</div><!--/.col-lg-6--><br>
<div class= "col-lg-6" >
<div class= "Input-group" >
<span class= "Input-group-addon" >
<input type= "Radio" >
</span>
<input type= "text" class= "Form-control" >
</div><!--/input-group-->
</div><!--/.col-lg-6-->
</div><!--/.row-->
</form>
</div >

button as the prefix or suffix element of the input box group

<div style= "padding:100px 100px 10px;" > <form class= "bs-example bs-example-form" role= "form" > <div class= "Row" > <div class= "col-lg-6" > & Lt;div class= "Input-group" > <span class= "input-group-btn" > <button class= "btn btn-default" type= "button"
> go!
</button> </span> <input type= "text" class= "Form-control" > </div><!--/input-group--> </div><!--/.col-lg-6--><br> <div class= "col-lg-6" > <div class= "Input-group" > < Input type= "text" class= "Form-control" > <span class= "input-group-btn" > <button class= "btn Btn-default"
Type= "button" > go! </button> </span> </div><!--/input-group--> </div><!--/.col-lg-6--> </div ><!--/.row--> </form> </div> class= "input-group-btn" <div class= "Input-group" > <div class= "Input-group-btn" > <button type= "button class=" btn btn-default dropdown-toggle "data-toggle=" DropdowN "> Pull-down menu <span class=" Caret "></span> </button> <ul class=" Dropdown-menu "> <li><a href= "#" > Function </a></li> <li><a href= "#" > Another feature </a></li> <li><a href= "# "> Other </a></li> <li class=" divider "></li> <li><a href=" # "> Separate link </a>< /li> </ul> </div><!--/btn-group--> <input type= "text" class= "Form-control" > </div> <!--/input-group--> <div class= "Input-group" > <div class= "input-group-btn" > <button type= " Button "class=" btn btn-primary dropdown-toggle "data-toggle=" dropdown "> <span class=" Glyphicon glyphicon-music " ></span> go <span class= "caret" ></span> </button> <ul class= "Dropdown-menu" > <li class= "Dropdown-header" > dropdown menu title </li> <li><a href= "#" >A</a></li> <li class= " Divider "><</li> <li><a href=" # ">B</a></li> </ul> </div> <input type= "text" class= "Form-control" > </div> <br> <div class= " Input-group "> <div class=" input-group-btn "> <button type=" button "class=" Btn btn-primary "> <span class= "Glyphicon glyphicon-music" ></span> go </button> <button type= "button" class= "Btn btn-primary Dropdown-toggle "data-toggle=" dropdown "> <span class=" caret "></span> </button> <ul class=" Dropdown-menu "> <li class=" Dropdown-header "> dropdown menu title </li> <li><a href=" # ">A</a>< 
/li> <li class= "divider" ><</li> <li><a href= "#" >B</a></li> </ul> </div> <input type= "text" class= "Form-control" > </div> <br>

The above is a small set to introduce the bootstrap input box code to share, I hope to help you!