bootstrap< Basic 15 > Input Frame Group

Original:bootstrap< Basic 15 > Input Box Group

Another feature supported by Bootstrap, 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.

By adding the prefix and suffix to the input field, you can add common elements to the user input. For example, you can add a dollar sign, or add a @ before the Twitter user name, or other common elements required by the application interface.

To add a prefix or suffix element to a . Form-control , follow these steps:

• Place the prefix suffix element in a <div> with class . Input-group .
• Next, within the same <div>, place additional content in the <span> of the class for . Input-group-addon .
• Place the <span> in front of or behind the <input> element.

to maintain cross-browser compatibility, avoid using the <select> element because they do not render the effect completely in the WebKit browser. Also do not apply the class of the input box group directly to the form group, which is an orphaned component.

Basic Input Box Group

The following example shows the basic input box group:

<! DOCTYPE html>
The results are as follows:
Size of the input box group
You can change the size of the input box group by adding a class that is relative to the form size (such as . INPUT-GROUP-LG, INPUT-GROUP-SM, Input-group-xs) to the . Input-group . The contents of the input box are automatically resized.
The following example demonstrates this:
<! DOCTYPE html>
The results are as follows:
check boxes and single-selection plugins
You can use a check box and a radio plug-in as the prefix or suffix element of the input box group, as shown in the following example:
<! DOCTYPE html>
The results are as follows:
Button Plug-in
You can also use the button as the prefix or suffix element of the input box group, which you are not adding . Input-group-addon class, you need to wrap the button with class . input-group-btn . This is required because the default browser style is not overridden. The following example demonstrates this:
<! DOCTYPE html>Go! </button> </span> <input type= "text" class= "Form-control" > </d iv><!--/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></body>
The results are as follows:
Buttons with drop-down menus
To add a button with a drop-down menu in the input box group, simply wrap the button and drop-down menu in a . INPUT-GROUP-BTN class, as shown in the following example:
<! DOCTYPE html>Drop- down menu<span class= "Caret" ></span> </button> <ul class= "Dropdown-menu" > <li><a href= "#" > Features </a></li> <li><a href= "#" > Another A feature </a></li> <li><a href= "#" > Other </a></li> <                  Li class= "divider" ></li> <li><a href= "#" > Detached links </a></li> </ul> </div><!--/btn-group--<input type= "text" class= "Form-contro         L "> </div><!--/input-group--</div><!--/.col-lg-6--><br> <div class= "col-lg-6" > <div class= "Input-group" > <input type= "text" class= "Form-co Ntrol "> <div class=" input-group-btn "> <button type=" button "class=" Btn Btn-defa                     Ult Dropdown-toggle "data-toggle=" dropdown "> Drop- down menu<span class= "Caret" ></span> </button> <ul class= "Dropdown-menu pull -right "> <li><a href=" # "> Features </a></li> <li><a hr                     ef= "#" > Another feature </a></li> <li><a href= "#" > Other </a></li>                  <li class= "Divider" ></li> <li><a href= "#" > Detached links </a></li>  </ul> </div><!--/btn-group--</div><!--/input-group -</div><!--/.col-lg-6-</div><!--/.row-</form></div>&lt ;/body>
The results are as follows:
Split drop-down menu button
Adding a split button with a drop-down menu in the input box group uses the same style as the drop-down menu button, but adds the main functionality to the drop-down menu, as shown in the following example:
<! DOCTYPE html>TabIndex= "-1" >Drop- down menu</button> <button type= "button" class= "btn btn-default dropdown-toggle" dat A-toggle= "dropdown" tabindex= "-1" > <span class= "Caret" ></span> < Span class= "sr-only" > Toggle drop-down menu </span> </button> <ul class= "Dropdown-menu" > <li><a href= "#" > Features </a></li> <li><a href= "#" &                     gt; Another feature </a></li> <li><a href= "#" > Other </a></li>                  <li class= "Divider" ></li> <li><a href= "#" > Detached links </a></li> </ul> </div><!--/btn-group--<input type= "text" class= "Form-co         Ntrol "> </div><!--/input-group--</div><!--/.col-lg-6--><br> <div class= "Col-lG-6 "> <div class=" Input-group "> <input type=" text "class=" Form-control "> <div class= "input-group-btn" > <button type= "button" class= "Btn Btn-default"TabIndex= "-1" >Drop- down menu</button> <button type= "button" class= "btn btn-default dropdown-toggle" dat A-toggle= "dropdown" tabindex= "-1" > <span class= "Caret" ></span> < Span class= "sr-only" > Toggle drop-down menu </span> </button> <ul class= "Dropdown-menu Pull-right "> <li><a href=" # "> Functions </a></li> <li><                     A href= "#" > Another feature </a></li> <li><a href= "#" > Other </a></li> <li class= "Divider" ></li> <li><a href= "#" > Detached links </a></li&gt                  ;         </ul> </div><!--/btn-group--</div><!--/input-group-- </div><!--/.col-lg-6-</div><!--/.row-</form></div></body></ html&Gt 
The results are as follows:
Series Articles:Bootstrap < Fundamentals > CSS Overview
bootstrap< Basic two > network system
bootstrap< Basic three > typesetting
bootstrap< basic Four > code
Bootstrap < Fundamentals five > forms
bootstrap< basic six > form
Bootstrap < basic seven > button
Bootstrap < basics eight > pictures
bootstrap< Basic Nine > Auxiliary class
bootstrap< Basic 10 > responsive Utility
bootstrap< Basic 11 > Font icons (glyphicons)
Bootstrap < Basics 12 > drop-down menu (dropdowns)
bootstrap< Basic 13 > button Group
bootstrap< Basic 14 > button drop-down menu
bootstrap< Basic 15 > Input Frame Group
bootstrap< basic 16 > Navigation elements
bootstrap< basic 17 > Navigation Bar Bootstrap < basic 18 > Breadcrumb navigation (Breadcrumbs) Bootstrap < Fundamentals 19 > Pagination bootstrap< Basics 20 > Tags Bootstrap < fundamentals 21 > badges (Badges) Bootstrap < basic 22 > Oversized screen (Jumbotron) Bootstrap < basic 23 > page title Header) bootstrap< Basic 24 > Thumbnail Bootstrap < basic 25 > Warning (Alerts) Bootstrap < basic 26 > progress bar
bootstrap< Basic 15 > Input Frame Group