Shulou(Shulou.com)06/02 Report--

This article mainly explains the "bootstrap can set the status of the form", the content of the explanation is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "bootstrap can set the status of the form" bar!

Bootstrap can set three states on the form: 1, the focus state, which tells the user that you can enter or select things; 2, the disabled state, which tells the user that you cannot enter or select things; and 3, the verification status, which tells the user whether the operation is correct.

Operating environment of this tutorial: Windows7 system, bootsrap3.3.7 version, DELL G3 computer

There are three main types of form control states in Bootstrap: focus state, disabled state, and validation state.

Focus status: this state tells the user that something can be entered or selected

The focus state is achieved through the pseudo class ": focus".

Bootstrap.css corresponding source code:

. form-control:focus {border-color: # 66afe9; outline: 0; / deleted the default style of outline-webkit-box-shadow: inset 0 1px 1px rgba, 00 8px rgba (102,175,233, .6); / / added shadow effects box-shadow: inset 0 1px 1px rgba (0mem0pool .075), 00 8px rgba (102,175,233, .6);}

How to use: add the class name "form-control" to the control.

Eg:

The effect is as follows: (blue border effect in focus)

In focus, the effects of file, radio, and checkbox controls are not exactly the same as normal input spaces, because bootstrap has special treatment for them.

Bootstrap.css corresponding source code:

Input [type= "file"]: focus,input [type= "radio"]: focus,input [type= "checkbox"]: focus {outline: thin dotted;outline: 5px auto-webkit-focus-ring-color;outline-offset:-2px;}

Disabled status: this state tells the user not to enter or select things

Disabling state is achieved by adding a "disabled" attribute to the form control.

Bootstrap.css corresponding source code:

.form-control [disabled], .form-control [readonly], fieldset [disabled] .form-control {cursor: not-allowed; background-color: # eee; opacity: 1;}

How to use it: add the "diabled" attribute to the form controls that need to be disabled.

Eg:

The effect image is as follows:

Description: in the disabled state, the background color of the control is gray, and the hand shape becomes a shape that is not allowed to be input. if the form control does not use the class name "form-control", then the disabled control has only one hand that is not allowed to be input.

PS: in Bootstrap, if fieldset sets the "disabled" property, the entire domain is disabled.

Eg:

Disabled input box disabled drop-down box is not selectable cannot select submit

The effect is shown in the following figure:

PS: for a disabled field, this input box cannot be disabled if there is an input box in the legend.

Eg:

Disabled input box disabled drop-down box is not selectable cannot select submit

The effect image is as follows:

Third, verify the status: this status tells the user whether their operation is correct.

Three validation status styles are available in Bootstrap:

①. Has-success: success status (green)

②. Has-error: error status (red)

③. Has-warning: warning status (yellow)

How to use: add the corresponding state class name to the form-group container.

Eg:

Success status warning status error status

Description: as can be seen from the effect, the effects of the three styles are all the same except for different colors.

In Bootstrap form validation, different states will provide different icon, such as success is a check mark "√", error is a cross sign "×" and so on.

If you want the form to display the corresponding icon in different states, simply add the class name "has-feedback" in the corresponding state.

PS: the class name "has-feedback" should be used with "has-error", "has-warning", and "has-success".

Eg:

Success status warning status error status

The effect is as follows:

Description: as can be seen from the effect picture, the icons are on the right.

Note: icons in Bootstrap are made using @ face-face and must be implemented by adding a span element to the form.

Eg:

Thank you for your reading, the above is the content of "bootstrap can set the status of the form", after the study of this article, I believe you can have a deeper understanding of what the state of the form can be set by bootstrap, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.