This article mainly introduces the knowledge of using bootstrap form styles to you. It is very good, let’s take a look together!
Form
<form role="form"><div><label for="exampleInputEmail1">Email: </label><input type="email" id="exampleInputEmail1" placeholder="Please enter your email address"></div><div><label for="exampleInputPassword1">Password</label><input type="password" id="exampleInputPassword1" placeholder="Please enter your email password"></div><label><input type="checkbox"> Remember your password</label></div><button type="submit">Enter the email</button></form>
Reproduction picture:
class: form-control
1. The width has become 100%, 2. A light gray (#ccc) border is set, 3. A rounded corner with 4px, 4. A shadow effect is set, and when the element gets focus, the shadow and border effects will change, 5. The color of placeholder is set to #999
2. Horizontal form:
The default form of the Bootstrap framework is vertical display style, but often we need horizontal form style (the label is on the left and the form control is on the right)
<form role="form"><div><label for="inputEmail3">Email</label><div><input type="email" id="inputEmail3" placeholder="Please enter your email address"></div></div><div><label for="inputPassword3">Password</label><div><input type="password" id="inputPassword3" placeholder="Please enter your email password"></div></div><div><div><label><input type="checkbox"> Remember the password</label></div></div></div><div><div><button type="submit">Enter the email</button></div></div></form>
Reproduction picture:
To achieve horizontal form effect in the Bootstrap framework, the following two conditions must be met:
1. The class name "form-horizontal" is used in the element.
2. Mesh system in line with the Bootstrap framework.
Using the class name "form-horizontal" on elements has the following functions:
- Set the form control padding and margin values.
- Change the expression of "form-group", similar to the "row" of the grid system.
3. Horizontal form:
Implementing such form effects in the Bootstrap framework is a breeze, you just need to add the class name "form-inline" to the element.
The implementation principle of inline form is very simple. To display the form control on one line, you need to set the form control to an inline block element (display:inline-block).
<form role="form"><div><label for="exampleInputEmail2">Email</label><input type="email" id="exampleInputEmail2" placeholder="Please enter your email address"></div><div><label for="exampleInputPassword2">Password</label><input type="password" id="exampleInputPassword2" placeholder="Please enter your email password"></div><label><input type="checkbox"> Remember your password</label></div><button type="submit">Enter the email</button></form>
Reproduction picture:
4. Input box input
A single-line input box, a common text input box, that is, the type attribute value of input is text. When using input in Bootstrap, you must also add type type. If you do not specify the type type, you will not get the correct style.
<form role="form"><div><input type="email" placeholder="Enter email"></div><div><input type="text" placeholder="Please enter username"/> </div></form>
Reproduction picture:
5. Pull down selection box select
The drop-down selection box in the Bootstrap framework is consistent with the original use, and the multi-line selection sets the value of the multiple attribute to multiple. The Bootstrap framework provides a unified style for these elements.
<form role="form"><div><select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></div><div><select multiple> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></div></form>
Reproduction picture:
6. Text field textarea
The text field is the same as the original usage method, setting rows can define its height, and setting cols can set its width. But if the class name "form-control" is added to the textarea element, there is no need to set the cols attribute. Because the "form-control" style form control in the Bootstrap framework is 100% or auto.
<form role="form"><div><textarea rows="3"></textarea></div></form>
Reproduction picture:
7. Checkbox checkbox and single select button radio
Checkbox and radio in the Bootstrap framework are a bit special. Bootstrap has made some special treatments for them. The main reason is that checkbox and radio will have some minor problems when used with label labels (the most headache is the alignment problem). With the Bootstrap framework, developers don’t need to think too much, they just need to follow the following method.
<form role="form"><h3>Case 1</h3><div><label><input type="checkbox" value="">Remember the password</label></div><div><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>Like</label></div><label><input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">Don't like</label></div></form>
Reproduction picture:
8. Check boxes and radio buttons horizontally
Sometimes, for layout purposes, check boxes and radio buttons need to be arranged horizontally. The Bootstrap framework also made considerations in this regard:
1. If checkbox needs to be arranged horizontally, you only need to add the class name "checkbox-inline" to the label label.
2. If radio needs to be arranged horizontally, you only need to add the class name "radio-inline" to the label label.
<form role="form"><div><label><input type="checkbox" value="option1">Game</label><label><input type="checkbox" value="option2">Photography</label><label><input type="checkbox" value="option3">Tourism</label><div><label><input type="radio" value="option1" name="sex">Male</label><label><input type="radio" value="option2" name="sex">Female</label><label><input type="radio" value="option3" name="sex">Neutral</label></div></form>
Reproduction picture:
9. Button
The buttons in the Bootstrap framework are all implemented
<table><thead><tr><th>Button</th><th>class=""</th><th>Description</th></tr></tbody><tr><td><button href="#">Default</button></td><td><code>btn</code></td><td>Standard gray button with gradient</td></tr><td><td><button href="#">Primary</button></td><td><code>btn btn-primary</code></td><td>Provides extra visual weight and identifies the primary action in a set of buttons</td></tr><td><button href="#">Info</button></td><td><code>btn btn-info</code></td><td>Used as an alternative to the default styles</td></tr><td><td><button href="#">Success</button></td><td><code>btn btn-success</code></td><td>Indicates a successful or positive action</td></tr><tr><td><button href="#">Warning</button></td><td><code>btn btn-warning</code></td><td>Indicates caution should be taken with this action</td></tr><td><td><button href="#">Danger</button></td><td><code>btn btn-danger</code></td><td>Indicates a dangerous or potentially negative action</td></tr><td><button href="#">Inverse</button></td><td><code>btn</verse</button></td><td><code>btn btn-inverse</code></td><td>Alternate dark gray button, not tied to a semantic action or use</td></tr></tbody></table>
Reproduction picture:
10. Form control size
The form controls seen earlier are of normal size. You can set the height of the control by setting the control's height, line-height, padding and font-size properties. However, the Bootstrap framework also provides two different class names to control the height of form controls. These two class names are:
1. input-sm: Make the control smaller than normal size
2. input-lg: Make the control larger than normal size
These two classes are suitable for input, textarea, and select controls in forms.
<form role="form"><div><label>Control becomes larger</label><input type="text" placeholder="Add.input-lg, the control becomes larger"></div><div><label>Normal size</label><input type="text" placeholder="Normal size"></div> <div><label>Control becomes smaller</label><input type="text" placeholder="Add.input-sm, the control becomes smaller"></div> </form>
Reproduction picture:
11. Form control status (disabled status)
The disabled state of the form control in the Bootstrap framework is the same as the normal form disabled state implementation method, adding the attribute "disabled" to the corresponding form control. See the following code for details
Disable a single form tag, just add disabled to the tag's attributes.
<form role="form"><div><div><input id="disabledInput" type="text" placeholder="Form has been disabled and cannot be entered" disabled></div></div> </form>
Reproduction picture:
In the Bootstrap framework, if the fieldset has disabled property set, the entire domain will be disabled.
<form role="form"><fieldset disabled><div><label for="disabledTextInput">Disabled input box</label><input type="text" id="disabledTextInput" placeholder="disabled input"></div><div><label for="disabledSelect">Disabled drop-down box</label><select id="disabledSelect"><option>Not selectable</option></select></div><div><label><input type="checkbox"> Cannot select</label></div><button type="submit">Submit</button></fieldset></form>
Reproduction picture:
It is said that for the entire disabled field, if there is an input box in the legend, this input box cannot be disabled.
form role="form"><fieldset disabled><legend><input type="text" placeholder="Obviously my color has turned gray, but I'm not disabled, don't believe it? Click to try" /></legend><div><label for="disabledTextInput">Disabled input box</label><input type="text" id="disabledTextInput" placeholder="disabled input"></div><div><label for="disabledSelect">Disabled drop-down box</label><select id="disabledSelect"><option>Not selectable</option></select></div><div><label><input type="checkbox">Not selectable</label></div><button type="submit">Submit</button></fieldset></form>
Reproduction picture:
Form Verification Status
When making a form, you have to do form verification. It is also necessary to provide verification status styles, and these effects are also provided in the Bootstrap framework.
1.has-warning: Warning status (yellow)
2. .has-error: Error status (red)
3. .has-success: Success status (green)
Many times, when verifying the form, different states will provide different icons, such as success is a check sign (√), error is a cross sign (×), etc. This effect is also provided in the Bootstrap box. If you want the form to display icon in the corresponding state, you only need to add the class name "has-feedback" in the corresponding state. Note that such names are to be with "has-error", "has-warning" and "has-success":
<form role="form"><div><label for="inputSuccess1">Success Status</label><input type="text" id="inputSuccess1" placeholder="success"></div><div><label for="inputWarning1">Warning Status</label><input type="text" id="inputWarning1" placeholder="warning status"></div><div><label for="inputError1">Error Status</label><input type="text" id="inputError1" placeholder="Error Status"></div></form><br><br><br><form role="form"><div><label for="inputSuccess1">Success Status</label><input type="text" id="inputSuccess1" placeholder="success Status"><span></span></div><div><label for="inputWarning1">Warning Status</label><input type="text" id="inputWarning1" placeholder="Warning Status"><span></span></div><div><label for="inputError1">Error Status</label><input type="text" id="inputError1" placeholder="Error Status"><span></span></div></form>
Reproduction picture:
Form prompt information
Usually, different prompt information should be provided when making form verification. This effect is also provided in the Bootstrap framework. A "help-block" style is used, and the prompt message is displayed in blocks and is displayed at the bottom of the control.
<form role="form"><div><label for="inputSuccess1">Success Status</label><input type="text" id="inputSuccess1" placeholder="success"><span>The information you entered is correct</span><span></span></div><div><label for="inputWarning1">Warning Status</label><input type="text" id="inputWarning1" placeholder="warning status"><span>Please enter the correct information</span><span></span></div><div><label for="inputError1">Error Status</label><input type="text" id="inputError1" placeholder="Error status"><span>The information you entered is wrong</span><span></span></div></form>
Reproduction picture:
The above is the use of Bootstrap form styles introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!