简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> php教程> PHP开发> body text

A complete in-depth study of Bootstrap forms

高洛峰
Release： 2016-12-03 16:38:27
Original
1471 people have browsed it

Foreword: Since there are many elements in the form, we will summarize the Bootstrap form separately. As the core content of Bootstrap, the main function of the form is a web control used to communicate with users. A good form design can make the web page communicate with users. Better communication. Common elements in forms mainly include: text input boxes, drop-down selection boxes, radio buttons, check buttons, text fields and buttons, etc.

1. Basic form
Copy after login

Detailed explanation:

(1) The role attribute of the form tag is only to enhance the semantics and has no other effect;

(2) Set .form-group for the div The class name is to keep a certain distance between the top and bottom of each input box, otherwise the two will be next to each other;

(3) The for attribute of label and the id of input must have the same name to identify that they are the same group, and when the mouse clicks on the label label, the cursor will automatically lock to the input box. You can also write like this without the for attribute:At this time, the length of the input is not the screen width;

(4) Add the .form-control class to the form:
1. The width is displayed at 100%;
2 .Set a light gray (#ccc) border;
3. Have 4px rounded corners;
4. Set a shadow effect, and when the element is focused, the shadow and border effects will change;

2. Horizontal form (The label is on the left, the input box is on the right)
Copy after login

Specific explanation:

Using the class .form-horizontal on the form tag mainly has the following functions:
1. Set the form control padding and margin values;
2. Change the " The expression form-group" is similar to the "row" of the grid system;
When used, it must be used in conjunction with the grid system to achieve the horizontal effect. Different layouts can be displayed for devices of different widths. When used, Adjust the size of the browser to see different effects. When the browser size is smaller than a certain value, it will display vertically.

3. Inline form (form controls are displayed in one line)
Copy after login

Detailed explanation:
Sometimes we will use the navigation bar at the top of the web page to enter the user name and password. In this case, it needs to be displayed in one line. At this time, give form It can be easily implemented by adding the .form-inline class to the label; at the same time, when the size of the display device is changed, line breaks will occur automatically, showing the style of a normal form.

4. Basic elements of the form

1. Input element: Adding the class .form-control can realize the most basic input box style

(1) Basic input box

Copy after login

(2) Larger than basic The input box

Copy after login

(3) is smaller than the basic input box

Copy after login

2. Textarea element: Adding the class .form-control eliminates the need to set the cols attribute value. At this time, the label width is 100%