Bootstrap simple form display learning notes and bootstrap learning notes
Form Layout
Vertical or basic form
BootStrap comes with the basic form structure. The steps for creating a basic form are as follows:
1. Add role = "form" to the parent <form> element ";
2. To get the best spacing, place the tag and control in a div. form-group, and the div under the parent form;
3. Add. form-control to all text elements <input>, <textarea>, and <select>.
<! DOCTYPE html>
The input and label of form-controlClass are divided into two rows, and there is a blue border style when the focus is obtained.
Inline form
All the elements in the inline form are inline, and labels are side by side.
1. Add classfrom-inline to the <form> label;
2. Each form needs to be included in div. form-group. checkbox can be included in div. checkbox, and radio can be included in div. radio;
3. By default, input, select, and textarea in bootstrap have a width of 100%. When using inline forms, you can set the width of the Form Control;
4. Adding sr-only to the label description can hide the label description.
<! DOCTYPE html>
If you want to study in depth, you can click here to learn and attach three special topics:
Bootstrap tutorial
Bootstrap tutorial
Bootstrap plugin usage tutorial
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.