Three forms created by Bootstrap (I) _ javascript tips-js tutorial

In this chapter, we will learn how to use Bootstrap to create a form. Bootstrap uses some simple HTML tags and extended classes to create forms of different styles. If you are interested in bootstrap forms, learn about them. In this chapter, we will learn how to create a form using Bootstrap. Bootstrap uses some simple HTML tags and extended classes to create forms of different styles.

Bootstrap form types are divided into three formats: vertical or basic form, inline form, and horizontal form.

Vertical or basic form (display: block ;)

The basic form structure is self-built by Bootstrap. Some Form Controls automatically receive some global styles. The steps for creating a basic form are listed below:

To parent

The effect is as follows:

If we remove form-control from select and add form-control to input type = "file", let's see how it works.

Can we see the difference from the above results? In this way, you probably understand the role of form-control, which is to set the perimeter border effect, including width, height, get
The form style in focus.

Inline form (all in the same row, and display is inline-block)

If you want to create a form, all its elements are inline and aligned to the left. labels are side by side.

Display Effect:

By default, input, select, and textarea in Bootstrap are 100% in width. When using a horizontal form, you must set a width on the Form Control.

Class. sr-only can be used to hide labels of inline forms.

Note: sr-only is displayed to screen readers rather than ordinary readers.

When the class of other forms is form-inline, the display is inLine-block, but the input tyoe = "file" is still display: block. It can be seen that there is a problem with the layout, in this case, you can set the display to inline-block separately;

Horizontal form (Form elements such as label and input are in the same row)

The horizontal form and other forms not only have different numbers of tags, but also have different forms. To create a horizontal layout form, follow these steps:

1. directed to the parent

Effect:

The above content introduces how Bootstrap creates a form.