Bootstrap, from Twitter, is the most popular front-end framework at present. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is simple and flexible, making web development faster.
When revising my own background, I used bootstrap in general layout, and there was no reason not to use the remaining form part. For the beautification and layout of the form, bootstrap is also very good, with atmospheric borders, multi-function buttons and macro form layout, everything is so complete and perfect!
Normal form
We need to wrap the form elements into the form-group class, which is generally stored in <div>...</div>, and the content of the form element name is generally placed in the label label, and the input label class name is form-control. It is worth noting that your checkbox and radio elements need to be written in your own div.
For example, the following form
<form> <div> <label for="exampleInputEmail1">Email address</label> <input type="email" id="exampleInputEmail1" placeholder="Email"> </div> <div> <label for="exampleInputPassword1">Password</label> <input type="password" id="exampleInputPassword1" placeholder="Password"> </div> <div> <label for="exampleInputFile">File input</label> <input type="password" id="exampleInputPassword1" placeholder="Password"> </div> <div> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p>Example block-level help text here.</p> </div> <div> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit">Submit</button></form>
Effect after running
Horizontal emission form
If your form elements need to be discharged horizontally, you can add class.form-inline to the form. This form is generally more suitable when there are fewer elements.
For example
<form> <div> <label for="exampleInputEmail3">Email address</label> <input type="email" id="exampleInputEmail3" placeholder="Email"> </div> <div> <label for="exampleInputPassword3">Password</label> <input type="password" id="exampleInputPassword3" placeholder="Password"> </div> <div> <label> <input type="checkbox"> Remember me </label> </div> <button type="submit">Sign in</button></form>
Ordinary form + element horizontal emission
This form is the most commonly used. When ordinary users register and fill in information, they can often see the following form effects.
Implementing this form uses the .form-horizontal class, and each row of elements is wrapped in <div>...</div>
form> <div> <label for="inputEmail3">Email</label> <div> <input type="email" id="inputEmail3" placeholder="Email"> </div> </div> <div> <label for="inputPassword3">Password</label> <div> <input type="password" id="inputPassword3" placeholder="Password"> </div> </div> <div> <div> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> </div> <div> <div> <button type="submit">Sign in</button> </div> </div> </div></form>
We can also see through the code that when doing form layout, you can also use col-sm and col-sm-offset for grid layout !
The above is a comprehensive analysis of the Bootstrap form Form introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!