Bootstrap provides the following types of form layouts:
•Vertical form (default) -> This one is not good-looking, it is all mobile versions, and the PC version takes up a row and it is not good-looking;
•Inline form-> I believe this is what you want, PC version responds to horizontal rows, and mobile version responds to vertical rows.
•Horizontal form->Control display with grid system
1. Vertical form
Standard steps for vertical form use
1. Add role="form" to the <form> element.
2. Place the tags and controls in a <div> with "form-group" to get the best spacing.
3. Add "form-control" styles 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="name">Age</label><input type="text" id="name" placeholder="please enter a age"></div></form>
2. Inline layout
Inline layout is exactly the same as vertical layout, but you need to add class=form-inline to <form role="form">.
<form role="form">
After using such an inline layout, the large screen is displayed horizontally and the small screen is displayed vertically.
Small screen:
Large screen:
3. Horizontal form
A horizontal form refers to the level between a Label tag and a control (input, button).
The steps for using it are as follows:
•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.
<form role="form"><div><label for="name">Name</label><div><input type="text" id="name" placeholder="please enter a name"></div></div><div><label for="name">Age</label><div><input type="text" id="name" placeholder="please enter a age"></div></form>
Only after using form-horizontal can the input control be set to div, and the div can also use the grid system. The form-horizontal style changes the behavior of the .form-group, acting like rows in a raster.
4. Checkbox and Radio
These two controls are special in Bootstrap. Sometimes they need to be horizontally arranged, and sometimes they need to be vertically arranged.
It is also like form, and it is also inlined.
• If inline display is required, set the class of the label surrounded by its outer layer to checkbox-inline.
• If the default vertical display is required, set the class of the label surrounded by the outer layer to heckbox.
<form role="form"><!-- Check--><div><label><input type="checkbox" value="">Banana</label></div><div><label><input type="checkbox" value="">Apple</label></div><div><label><input type="checkbox" value="">Watermelon</label></div><div><label><input type="checkbox" value="">Banana</label></div><div><label><input type="checkbox" value="">Apple</label></div><div><label><input type="checkbox" value="">Watermelon</label></div><!-- Single choice--><div><label><input type="radio" name="optionsRadios" value="option1" checked> Male</label></div><div><label><input type="radio" name="optionsRadios" value="option2" checked> Female</label></div><div><label><input type="radio" name="optionsRadios" value="option1" checked> Male</label></div><div><label><input type="radio" name="optionsRadios" value="option2" checked> Female</label></div></form>
The display effect is as follows:
5. Static controls
Static controls refer to those that cannot change the value. In bootstrap, when you need to place plain text behind form tags within a horizontal form, use class="form-control-static" on <p>.
<form role="form"><div><label>Name</label><div><p>Liu Xuande</p></div></div></form>
The display effect is as follows:
6. Form Help Text
Bootstrap form help text generally refers to the input prompt, usually followed by an HTML element of .help-block.
<form role="form"><div><input type="text" ><span>Special reminder, if you don’t have anything, don’t type it. </span></div></form>
The display effect is as follows:
In addition to these, Bootstrap also has many columns of styles used to control input height, whether the input is successful, etc. Just check these and find the corresponding keywords and record them later.
The above is the Bootstrap form layout 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!