Bootstrap provides three form layouts: vertical form, inline form, and horizontal form
Create a vertical or basic form:
•・Add role="form" to the parent <form> element.
•・Put the tags and controls in a <div> with class .form-group. This is necessary to get the best spacing.
•・Add class .form-control to all text elements <input>, <textarea> and <select>
<form role="form"> <div> <label for="name">Name</label> <input type="text" id="name" placeholder="Please enter a name"> </div> <div> <label for="inputfile">File input</label> <input type="file" id="inputfile"> <p>This is an example of block-level help text. </p> </div> <div> <label> <input type="checkbox"> Please check</label> </div> <button type="submit">Submit</button> </form>
Inline form:
All elements in the inline form are aligned to the left and the labels are side by side. To create an inline form, you need to add class.form-inline to the form tag
<form role="form"> <div> <label for="name">Name</label> <input type="text" id="name" placeholder="Please enter a name"> </div> <div> <label for="input file">File input</label> <input type="file" id="inputfile"> </div> <div> <label> <input type="checkbox"> Please check</label> </div> <button type="submit">Submit</button> </form>
The display effect is as follows:
Note: By default, input, select, and textarea in Bootstrap have 100% width. When using inline forms, you need to set a width on the form control.
Horizontal Form: Different from the other two forms, you need to follow the following steps to create a horizontal form.
•Add class .form-horizontal to the parent <form> element.
•Put the tags and controls in a <div> with class .form-group.
•Add class .control-label to the label.
For example:
<form role="form"> <div> <label for="firstname">Name</label> <div> <input type="text" id="firstname" placeholder="please enter a first name"> </div> </div> <div> <label for="lastname">Last</label> <div> <input type="text" id="lastname" placeholder="please enter a last name"> </div> </div> <div> <div> <label> <input type="checkbox"> Remember me</label> </div> </div> </div> <div> <div> <button type="submit">Login</button> </div> </div> </form>
The display effect is as follows:
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.