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.