Comprehensive parsing bootstrap form usage (form style) _javascript tips

First, the underlying form

 <form >
 <div class= "Form-group" >
 <label> email:</label> <input
 "Email" class= "Form-control" placeholder= "Please enter your email address" >
 </div>
 <div class= "Form-group" >
 < Label > Password </label>
 <input type= "password" class= "Form-control" placeholder= "Please enter your email password" >
 < /div>
 <div class= "checkbox" >
 <label>
 <input type= "checkbox" > Remember password
 </ label>
 </div>
 <button type= "Submit" class= "btn Btn-default" > enter mailbox </button>
 </form>

In addition to these elements of the form, there are input, select, textarea and other elements, in the bootstrap framework, by customizing a class name ' Form-control ', that is, if these elements use the class name "Form-control", Will implement some of the design customization effects.

1, the width becomes 100%

2, set a light gray (#ccc) border

3, with 4px rounded corners

4, set the shadow effect, and the element gets focus, shadow and border effects will change

5, set the color of the placeholder for #999

Second, the horizontal form
The bootstrap framework defaults to the vertical display style, but many times we need the horizontal form style (the label is left, the form control is right).

<form class= "form-horizontal" role= "form" >
 <div class= "Form-group" >
 <label for= "InputEmail3" "class=" col-sm-2 control-label > Mailbox:</label> <div class= "
 col-sm-4" >
 <input type= "Email" class= "Form-control" id= "inputEmail3" placeholder= "Please enter your email address" >
 </div>
 </div>
 < Div class= "Form-group" >
 <label for= "InputPassword3" class= "col-sm-2 Control-label" > Password:</label>
 <div class= "col-sm-4" >
 <input type= "password" class= "Form-control" id= "InputPassword3" Placeholder= "Please enter your email password" >
 </div>
 </div>
 </form>

To achieve horizontal form effects in the bootstrap framework, the following two conditions must be met:
1, in <form> element is the use of the class name ". Form-horizontal".
2, with bootstrap frame grid system.

The use of the class name ". Form-horizontal" on <form> elements mainly has the following functions:
1. Set the padding and margin values of the form controls.
2, change the "form-group" form of expression, similar to the grid system "row".

Third, inline form
Sometimes we need to display the form's controls on one line.

 <form class= "Form-inline" role= "form" >
 <div class= "Form-group" > <label class= "sr-only" for= "
 ExampleInputEmail2 "> Mailbox </label>
 <input type=" email "class=" Form-control "id=" ExampleInputEmail2 " Placeholder= "Please enter your email address" >
 </div>
 <div class= "Form-group" >
 <label class= "Sr-only" for = "ExampleInputPassword2" > Password </label>
 <input type= "password" class= "Form-control" id= " ExampleInputPassword2 "placeholder=" Please enter your email password ">
 </div>
 <button type=" Submit "class=" btn Btn-default "> Enter mailbox </button>
 </form>

It's easy to implement such a form effect in the bootstrap framework, you just add the class name ". Form-inline" to the <form> element.

If you want to add a label label in front of input, it will cause input wrapping to appear. If you have to add such a label label and don't want input to wrap, you need to put the label label in the container "Form-group" as well.

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 a comprehensive analysis of the first use of bootstrap form, and then more content will continue to update, I hope you continue to pay attention.