“This is the 29th day of my participation in the August Gwen Challenge.
About the preface
This article mainly focuses on the form elements in the Bootstrap style. If you are interested, you can also refer to the previous articles to learn the Bootstrap style together. Diggers can view it through the portal.
- Lists and buttons
- The navigation bar
The form elements
Individual form controls are automatically assigned some global styles. All ,
The inline form
Adding a.form-inline class to a
Horizontally arranged forms
By adding a.form-horizontal class to the form and using the Bootstrap preset grid class, you can lay out the Label label and control group side by side. Doing so will change the behavior of.form-group to behave like rows in the grid system, so there is no need to add.row.
Supported controls
The standard form controls that are supported are shown in the form layout example.
Input box
Includes most form controls, text input field controls, and supports all types of HTML5 input controls: Text, password, datetime, datetime-local, date, month, time, week, number, email, URL, search, tel, and color.
Type declarations must be added
Only input controls with the Type property properly set can be styled correctly.
Copy
<input type="text" class="form-control" placeholder="Text input">
Copy the code
Input control group
To add text content or button controls before or after the text input field , refer to Input Control Groups.
Text field
Form controls that support multiple lines of text. The rows attribute can be changed as needed.
Copy
<textarea class="form-control" rows="3"></textarea>
Copy the code
Multiple selection and single selection boxes
Checkboxes are used to select one or more options from a list, while single boxes (radio) are used to select only one option from multiple options.
Inline radio and multiple boxes
A series of checkbox or radio controls can be arranged on a single line by applying the.checkbox-inline or.radio-inline classes to them.
Static control
If you need to place a line of plain text and a label element on the same line on a form, add the.form-Control-static class to the
element.
Focus state
We removed the default Outline style for some form controls, and then gave the: Focus state a box-shadow attribute.
Disabled state
Setting the Disabled property to the input box prevents it from having any interaction with the user (focus, input, and so on). The disabled input box is lighter in color and the not-allowed mouse state is added.
disabledfieldset
Setting the disabled property for
read-only
Setting the readonly property for the input field prevents the user from modifying the contents of the input field. Input boxes in read-only state are lighter in color (like disabled input boxes), but still retain the standard mouse state.
Check the state
Bootstrap defines styles for the validation states of form controls, such as error, warning, and SUCCESS. When used, add.has-warning,.has-error, or.has-success classes to the parent element of these controls. Any.control-label,.form-control, and.help-block elements contained within this element will accept styles for these validation states.