Bootstrap input box group, bootstrap input box Group

Source: Internet
Author: User

Bootstrap input box group, bootstrap input box Group
You can extend the Form Control by adding text or buttons to the front, back, or sides of the text input box <input>. Assign the. input-group-addon class to. input-group. You can add additional elements to the front or back of. form-control.
Only text input boxes are supported. <input>
Avoid using the <select> element because the WebKit browser cannot completely draw its style.
Avoid using <textarea> elements because their rows attributes are not supported in some cases.
Special settings are required for the tooltip and pop-up boxes in the input box group.
Is. the container: 'body' parameter must be set when the element tooltip or popover contained in the input-group is used to avoid unexpected side effects (for example, after the tooltip or pop-up box is activated, the current element may become wider or/or lose its rounded corner ).
Do not mix with other components
Do not mix the form group or column Class directly with the input box group. Instead, the input box group is nested inside the form group or grid-related elements.

1. Basic Cases

The Code is as follows:

<! DOCTYPE html> 




Dimensions
Add the corresponding dimension class for. input-group. The elements contained in the class are automatically adjusted. You do not need to repeatedly Add a class with a size control for each element in the input box group.
The Code is as follows:

<! DOCTYPE html> 

Java tutorial network in detail, this article URL: http://java.662p.com/thread-4671-1-1.html


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.