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>
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
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.
The Bootstrap form layout style is as follows
Implementation code:
<form role="form"> <fieldset> <legend>Configure data source</legend> <div> <label for="ds_host">Hostname</label> <div> <input id="ds_host" type="text" placeholder="192.168.1.161"/> </div> <label for="ds_name">Database name</label> <div> <input id="ds_name" type="text" placeholder="msh"/> </div> </div> <div> <label for="ds_username">Username</label> <div> <input id="ds_username" type="text" placeholder="root"/> </div> <label for="ds_password">Password</label> <div> <input id="ds_password" type="password" placeholder="123456"/> </div> </fieldset> <fieldset> <legend>Select related table</legend> <div> <label for="disabledSelect">Table name</label> <div> <select id="disabledSelect"> <option>Select </option> <option>Select </select> </div> </fieldset> <fieldset> <legend>field name</legend> <div> <label for="disabledSelect">Table name</label> <div> <select id="disabledSelect"> <option>No selection</option> <option>No selection</option> </select> </div> </fieldset> </form>
If you still want to study in depth, you can click here to learn and attach a wonderful topic to you: Bootstrap learning 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.