Comprehensive parsing bootstrap form usage (form control) _javascript tips

One, input boxes input

A single-line input box, a common text entry box, that is, the Type property value of input is text.

You must also add type types when you use input in bootstrap, and you cannot get the correct style if you do not specify type types because the bootstrap frame is passed through input[type= "?".

(where the number represents the type, such as the text type, corresponding to the input[type= "text"]) to define the style.

The class name ". Form-control" needs to be added in order for the control to be styled in a variety of form styles.

<form role= "Form" >
<div class= "Form-group" >
<input type= "email" class= "Form-control" placeholder= "Enter Email" >
</div>
</form>

Second, Drop-down selection box select

The Drop-down selection box in the bootstrap frame uses the same as the original, and the multiline selection setting multiple the value of the property to multiple.

<form role= "Form" >
<div class= "Form-group" >
 <select class= "Form-control" >
 < option>1</option>
 <option>2</option>
 <option>3</option>
 < option>4</option>
 <option>5</option>
 </select>
 </div>
 < Div class= "Form-group" >
 <select multiple class= "Form-control" >
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>
</div>
</form>

Iii. text field textarea

The text field is the same as the original use method, set rows to define its height, and set cols to set its width.

However, if the class name ". Form-control" class name is added to the TEXTAREA element, you do not need to set the Cols property.

Because the Form-control-style form control in the bootstrap frame has a width of 100% or auto.

 <form role= "Form" >
 <div class= "Form-group" >
 <textarea class= "Form-control" rows= "3" >< /textarea>
 </div>
 </form>

check box checkbox and single selection button radio

1, whether the checkbox or radio are used label wrapped up
2. The checkbox, along with the label label, is placed in a container named ". CheckBox"
3. Radio is placed in a container named ". Radio" with label label

<form role= "Form" >
<div class= "checkbox" >
<label>
<input type= "checkbox" value= "" >
Remember Password
</label>
</div>
<div class= "Radio" >
<label>
<input type= "Radio" name= "Optionsradios" id= "optionsRadios1" value= "Love" checked>
like
</label >
</div>
<div class= "Radio" >
<label>
<input type= "Radio" name= " Optionsradios "id=" OptionsRadios2 "value=" hate ">
don't like
</label>
</div>
</ Form>

Five, check box and radio button horizontal arrangement
1, if the checkbox needs to be arranged horizontally, simply add the class name ". Checkbox-inline" to the label label.
2. If the radio needs to be arranged horizontally, simply add the class name ". Radio-inline" to the label label.

<form role= "Form" >
 <div class= "Form-group" >
 <label class= "Checkbox-inline" >
 < Input type= "checkbox" value= "Option1" > Game
 </label>
 <label class= "Checkbox-inline" >
 < Input type= "checkbox" value= "Option2" > Photography
 </label>
 <label class= "Checkbox-inline" >
 < Input type= "checkbox" value= "Option3" > Tourism
 </label>
 </div>
 <div class= "Form-group" >
 <label class= "Radio-inline" >
 <input type= "Radio" value= "Option1" name= "Sex" > Male
 </label>
 <label class= "Radio-inline" >
 <input type= "Radio" value= "Option2" name= "Sex" > Women
 </label>
 <label class= "Radio-inline" >
 <input type= "Radio" value= "Option3" Name= " Sex "> Neutral
 </label>
 </div>
</form>

Six, form control size
The bootstrap framework also provides two different class names to control the height of a form control. The two class names are:
1, INPUT-SM: Make the control smaller than the normal size
2, INPUT-LG: Make the control larger than the normal size
These two classes apply to the Input,textarea and select controls in the form.

<input class= "Form-control input-lg" type= "text" placeholder= "Add. Input-lg, control becomes larger" >
<input class= " Form-control "type=" text placeholder= "normal size" >
<input class= "Form-control input-sm" type= "text" placeholder = "Add. Input-sm, control smaller" >

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The above is the use of bootstrap form control, and then more content will continue to update, I hope you continue to pay attention.