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

This article mainly introduces "how to use the form in bootstrap3.0". In the daily operation, I believe that many people have doubts about how to use the form in bootstrap3.0. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the question of "how to use the form in bootstrap3.0"! Next, please follow the editor to study!

Basic case

Individual form controls are automatically assigned some global styles. All elements with .form-control set to, and will be set to width: 100%; by default. Wrap label and the previously mentioned controls in .form-group to get the best arrangement.

The code is as follows:

Email address

Password

File input

Example block-level help text here.

Check me out

Submit

The width of the two text boxes is indeed 100%. And there are three form-group.

Inline form

Set A. form-inline for left-aligned and inline-block-level controls to make them more compact.

Width needs to be set: in Bootstrap, input, select, and textarea are set to 100% width by default. In order to use inline forms, you need to set the width specifically for the form controls you are using.

Be sure to set label: if you do not set label for each input control, the screen reader will not be able to read correctly. For these inline forms, you can hide them by setting the. sr-only for label.

The code is as follows:

Email address

Password

Remember me

Sign in

Horizontally arranged forms

You can lay out label and control groups horizontally side by side by adding A. form-horizontal to the form and using the grid class that Bootstrap presets. Doing so will change the behavior of the. form-group so that it behaves as a row in the grid system, so you no longer need to use .row.

The code is as follows:

Email

Password

Remember me

Sign in

Supported controls

The standard form controls it supports are shown in the form layout case.

Input

Most form controls, text input field controls. Includes all types supported by HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Note: only input controls with the correct type set up can be given the correct style.

Example of text box

The code is as follows:

Textarea

A form control that supports multiple lines of text. The rows property can be changed as needed.

The code is as follows:

Textarea

Checkbox and radio

Checkbox is used to select one or more options in the list, while radio is used to select only one of multiple options.

Default appearance (stacked)

The code is as follows:

Option one is this and that-be sure to include why it's great

Option one is this and that-be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Inline checkboxes

You can arrange controls in a row by applying the. checkbox-inline or A. radio-inline to a series of checkbox or radio controls

The code is as follows:

one

two

three

In the same way, Radio is the same, you just need to add a style.

Select

The code is as follows:

one

two

three

four

five

one

two

three

four

five

Static control

In a horizontally laid out form, if you need to place a line of plain text on the same line as label,

Just add .form-control-static to the element.

The code is as follows:

Email

Email@examtryrtyrple.com

Password

Control state

You can provide feedback to users by setting some basic states for controls and label.

Input focus

We removed the default outline style for some form controls and assigned the box-shadow style to their: focus state.

The code is as follows:

Disabled input box

Setting the disabled property for the input box prevents user input and changes the appearance a little bit to make it more intuitive.

The code is as follows:

Disabled fieldset

You can disable all controls contained in to set the disabled property.

The link function of the tag is not affected.

This class only changes the appearance of the button, not disables its function. It is recommended that you disable the linking feature through JavaScript code.

Cross-browser compatibility

Although Bootstrap applies these styles to all browsers, the disabled attribute is not supported in browsers with Internet Explorer 9 and below. Therefore, it is recommended to disable fieldset through JavaScript code on these browsers.

The code is as follows:

Disabled input

Disabled select menu

Disabled select

Can't check this

Submit

You can move the mouse over each control to see the effect.

Check status

Bootstrap defines styles for the validation states of form controls, such as error, warning, and success states. When in use, add. Has-warning,. Has-error, or. Has-success to the parent element of these controls. Any .control-label, .form-control, and .help-block contained within this element will accept the style of these check states.

The code is as follows:

Input with success

Input with warning

Input with error

Control size

You can set the height for the control through a class such as. Input-lg, and set the width for the control through a class such as .col-lg-*.

Height dimension

Create larger or smaller form controls to match the button size.

The code is as follows:

...

...

...

Resize the column

Wrapping input or any of its parent elements with columns in the grid system makes it easy to set the width.

The code is as follows:

Help text

Block-level help text for form controls.

The code is as follows:

Own one or more lines of block-level help text.

At this point, the study on "how to use forms in bootstrap3.0" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.