Bootstrap simple Form display learning notes _javascript tips

Form layout

Vertical or Basic form

Basic form structure when bootstrap, the steps to create a basic form are as follows:

1, add role = "form" to the parent <form> element;
2, in order to get the best spacing, put the label and control in a div.form-group, Div placed under the parent form;
3. Add to all text elements <input>, <textarea> and <select>. Form-control

<! DOCTYPE html>
 
 

The Form-controlclass input and label are divided into two lines, and the blue border style is available when the focus is obtained.

Inline form

All the elements in the inline form are inline, and the labels are all side-by

1. Add classfrom-inline to <form> tags;
2. Each form need to be included in the Div.form-group,checkbox can be contained in the Div.checkbox,radio can be included in the Div.radio;
3. By default, the input, select, and textarea in Bootstrap have 100% widths, and you can set the width of the form control when you use inline forms;
4. Add sr-only to the label description to hide the label description.

<! DOCTYPE html>  

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.