Fully parse Bootstrap form usage (Form Control) _ javascript skills

Source: Internet
Author: User
This article comprehensively analyzes how to use Bootstrap forms. This article focuses on Bootstrap form controls. For more information, see I. input box

Single-line input box, a common text input box, that is, the type attribute value of input is text.

When using input in Bootstrap, the type must also be added. If the type is not specified, the correct style cannot be obtained, because the Bootstrap framework uses the input [type = "?"]

(Where? Number indicates the type. For example, the text type corresponds to the input [type = "text"]) format to define the style.

To prevent style errors in various form styles, you must add the Class Name ". form-control ".

 

Ii. select

The drop-down box in the Bootstrap framework is consistent with the original one. For multiple rows, set the value of the multiple attribute to multiple.

 


3. textarea

The text field is the same as the original usage method. You can set rows to define its height and cols to set its width.

However, if the ". form-control" class name is added to the textarea element, you do not need to set the cols attribute.

Because the form control in the form-control style in the Bootstrap framework is 100% in width or auto.

 

Iv. Check box checkbox and single-choice button radio

1. Both checkbox and radio are packaged with labels.
2. checkbox and label are placed in a container named ". checkbox ".
3. radio and label are placed in a container named ". radio ".

 

5. Check box and radio button horizontal arrangement
1. If the checkbox needs to be horizontally arranged, you only need to add the Class Name ". checkbox-inline" on the label"
2. If radio needs to be horizontally arranged, you only need to add the Class Name ". radio-inline" on the label"

 

6. Form Control size
The Bootstrap framework also provides two different class names to control the height of Form Controls. The two classes are:
1. input-sm: make the control smaller than normal
2. input-lg: make the control larger than normal
These two classes apply to the input, textarea, and select controls in the form.

 

The above is how to use the Bootstrap Form Control. More content will be updated later. I hope you will continue to pay attention to it.

Related Article

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.