_javascript techniques for fully parsing bootstrap form styles

This article mainly introduces the use of bootstrap form style knowledge, very good, together to see!

Form

<form role= "Form" >
<div class= "Form-group" >
<label for= "ExampleInputEmail1" > Mailbox: </ label>
<input type= "email" class= "Form-control" id= "exampleInputEmail1" placeholder= "Please enter your email address" >
</div>
<div class= "Form-group" >
<label for= "exampleInputPassword1" > Password </label>
<input type= "password" class= "Form-control" id= "exampleInputPassword1" placeholder= "Please enter your email password" >
</div>
<div class= "checkbox" >
<label>
<input type= "checkbox" > Remember password
</label>
</div>
<button type= "Submit" class= "btn Btn-default" > enter mailbox </button>
</form>

Effect Chart:

Class:form-control

1, width into 100%, 2, set a light gray (#ccc) border, 3, with 4px fillet, 4, set the shadow effect, and the element gets focus, shadow and border effects will change, 5, set the placeholder color for #999

2. Horizontal form:

The bootstrap framework defaults to the vertical display style, but many times we need the horizontal form style (tag left, form control right)

 <form class= "form-horizontal" role= "form" > <div class= "Form-group" > <label for = "InputEmail3" class= "Col-sm-2 Control-label" > Mailbox </label> <div class= "col-sm-10" > <input type= " Email "class=" Form-control "id=" inputEmail3 "placeholder=" Please enter your email address "> </div> </div> <div class=" Form-group "> <label for=" inputPassword3 "class=" col-sm-2 Control-label "> Password </label> <div class=" Col-sm-10 "> <input type=" password "class=" Form-control "id=" inputPassword3 "placeholder=" Please enter your email password > </ div> </div> <div class= "Form-group" > <div class= "col-sm-offset-2 col-sm-10" > <div class= "
CheckBox "> <label> <input type= checkbox" > Remember password </label> </div> </div> </div> <div class= "Form-group" > <div class= "col-sm-offset-2 col-sm-10" > <button type= "Submit" class= "BTN" Btn-default "> Enter mailbox </button> </div> </div> </form> 

Effect Chart:

To achieve horizontal form effects in the bootstrap framework, the following two conditions must be met:

1, in the element is the use of the class name "Form-horizontal".

2, with bootstrap frame grid system.

The use of the class name "Form-horizontal" on an element has the following main functions:

-Sets the padding and margin values for the form control.
-Change the expression of "Form-group", similar to the "row" of the grid system.

3. Horizontal form:

It's easy to implement such a form effect in the bootstrap framework, you just add the class name "Form-inline" to the element.
Inline form implementation is very simple, to display the form control on one line, you need to set the form control as an inline block element (Display:inline-block).

<form class= "Form-inline" role= "form" >
<div class= "Form-group" > <label class= "sr-only" for= "
ExampleInputEmail2 "> Mailbox </label>
<input type=" email "class=" Form-control "id=" ExampleInputEmail2 " Placeholder= "Please enter your email address" >
</div>
<div class= "Form-group" >
<label class= "Sr-only" for = "ExampleInputPassword2" > Password </label>
<input type= "password" class= "Form-control" id= " ExampleInputPassword2 "placeholder=" Please enter your email password ">
</div>
<div class=" checkbox ">
< label>
<input type= "checkbox" > Remember password
</label>
</div>
<button type= " Submit "class=" BTN btn-default > enter mailbox </button>
</form>

Effect Chart:

4, input box inputs

A single-line input box, a common text entry box, that is, the Type property value of input is text. You must also add type types when you use input in bootstrap, and you will not get the correct style if you do not specify type types.

<form role= "Form" >
<div class= "Form-group" >
<input type= "email" class= "Form-control" placeholder= "Enter Email" >
</div>
<div class= "Form-group" >
<input type= "text" class= "Form-control" placeholder= "Please enter user name"/> 
</div>
</form>

Effect Chart:

5. Dropdown selection Box Select

The Drop-down selection box in the bootstrap frame uses the same as the original, and the multiline selection setting multiple the value of the property to multiple. The bootstrap framework provides a unified style style for these elements.

<form role= "Form" >
<div class= "Form-group" >
<select class= "Form-control" > 
< option>1</option> 
<option>2</option> 
<option>3</option> 
< option>4</option> 
<option>5</option> 
</select>
</div>
< Div class= "Form-group" >
<select multiple class= "Form-control" > 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 
</select>
</div>
</form>

Effect Chart:

6. Text field textarea

The text field is the same as the original use method, set rows to define its height, and set cols to set its width. However, you do not need to set the Cols property if the class name "Form-control" class name is added to the TEXTAREA element. Because the Form-control-style form control in the bootstrap frame has a width of 100% or auto.

<form role= "Form" >
<div class= "Form-group" >
<textarea class= "Form-control" rows= "3" >< /textarea>
</div>
</form>

Effect Chart:

7. CheckBox checkbox and Single selection button radio

Bootstrap frame in the checkbox and radio a little special, bootstrap for them to do some special processing, mainly checkbox and radio with label label with the use of some small problems (the most headache is the alignment problem). With the bootstrap framework, developers need not think too much, just use the following methods.

<form role= "Form" >
 
 

Effect Chart:

8. check box and radio button horizontal arrangement

Sometimes, you need to arrange the check boxes and radio buttons horizontally for the layout. The bootstrap framework has also taken into account this aspect:

1. If the checkbox needs to be arranged horizontally, simply add the class name "Checkbox-inline" to the label label

2. If the radio needs to be arranged horizontally, simply add the class name "Radio-inline" to the label label

<form role= "Form" >
<div class= "Form-group" >
<label class= "Checkbox-inline" >
< Input type= "checkbox" value= "Option1" > Game
</label>
<label class= "Checkbox-inline" >
< Input type= "checkbox" value= "Option2" > Photography
</label>
<label class= "Checkbox-inline" >
< Input type= "checkbox" value= "Option3" > Tourism
</label>
</div>
<div class= "Form-group" >
<label class= "Radio-inline" >
<input type= "Radio" value= "Option1" name= "Sex" > Male
</label>
<label class= "Radio-inline" >
<input type= "Radio" value= "Option2" name= "Sex" > Women
</label>
<label class= "Radio-inline" >
<input type= "Radio" value= "Option3" Name= " Sex "> Neutral
</label>
</div>
</form>

Effect Chart:

9. Button

The buttons in the bootstrap frame are used to implement the

<table class= "Table table-bordered table-striped" > <thead> <tr> <th>Button</th> <th >class= "" </th> <th>Description</th> </tr> </thead> <tbody> <tr> <td ><button class= "btn" href= "#" >Default</button></td> <td><code>btn</code> </td> <td>standard Gray button with gradient</td> </tr> <tr> <td><button class= " BTN btn-primary "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> </t r> <tr> <td><button class= "btn btn-info" href= "#" >Info</button></td> <td>< CODE&GT;BTN btn-info</code></td> <td>used As a alternative to the default styles</td> </tr&
Gt <tr> <td><button class= "btn btn-success" href= "#">Success</button></td> <td><code>btn btn-success</code></td> <td> Indicates a successful or positive action</td> </tr> <tr> <td><button class= "Btn btn-warning" href= "#" >Warning</button></td> <td><code>btn btn-warning</code></td> < Td>indicates caution should is taken with this action</td> </tr> <tr> <td><button class= "BT n Btn-danger "href=" # ">Danger</button></td> <td><code>btn btn-danger</code></ Td> <td>indicates A dangerous or potentially negative action</td> </tr> <tr> <td>< Button class= "btn btn-inverse" href= "#" >Inverse</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>

Effect Chart:

10. Form Control Size

The form controls that you see earlier are normal sizes. You can implement the height setting of a control by setting properties such as the height,line-height,padding and font-size of the control. However, the bootstrap framework also provides two different class names to control the height of a form control. The two class names are:

1, INPUT-SM: Make the control smaller than the normal size

2, INPUT-LG: Make the control larger than the normal size

These two classes apply to the Input,textarea and select controls in the form.

<form role= "Form" >
<div class= "Form-group" >
<label class= "Control-label" > control becomes larger </label >
<input class= "Form-control input-lg" type= "text" placeholder= "Add. Input-lg, control gets Bigger" >
</div>
<div class= "Form-group" >
<label class= "Control-label" > Normal size </label>
<input class = "Form-control" type= "text" placeholder= "normal size" >
</div> 
<div class= "Form-group" >
< Label class= "Control-label" > Control small </label>
<input class= "Form-control input-sm" type= "text" Placeholder= "Add. Input-sm, control smaller" >
</div> 
</form>

Effect Chart:

11. Form control state (disabled state)

The disabled state of the form control for the bootstrap framework is the same as the normal form disabled state implementation method, adding the property "disabled" on the corresponding form control. Specifically look at the following code

To disable a single form label, simply add disabled to the label's properties

<form role= "form" class= "Form-horizontal" >
<div class= "Form-group" > <div class= "col-xs-6"
> <input class= "Form-control input-lg" id= "Disabledinput" type= "
text" placeholder= "form has been disabled and cannot be entered" disabled >
</div>
</div> 
</form>

Effect Chart:

In the bootstrap framework, if the disabled property is set fieldset, the entire domain will be in a disabled state.

<form role= "Form" >
<fieldset disabled>
<div class= "Form-group" >
<label for= " Disabledtextinput > Disabled input box </label>
<input type= "text" id= "Disabledtextinput" class= "Form-control" placeholder= "no input" >
</div>
<div class= "Form-group" >
<label for= "Disabledselect" > Disabled drop-down box </label>
<select id= "Disabledselect" class= "Form-control" >
<option> not selectable </ option>
</select>
</div>
<div class= "checkbox" >
<label>
<input type= "checkbox" > cannot select
</label>
</div>
<button type= "Submit" class= "BTN" Btn-primary "> Submit </button>
</fieldset>
</form>

Effect Chart:

It is said that for the entire disabled domain, this input box cannot be disabled if there is an input box in the legend.

Form role= "Form" >
<fieldset disabled>
<legend><input type= "text" class= "Form-control" Placeholder= "Obviously my color turned gray, but I'm not banned, don't believe?" Click to try "/></legend>
<div class= form-group" >
<label for= "disabledtextinput" > Disabled input Boxes </label>
<input type= "text" id= "Disabledtextinput" class= "Form-control" placeholder= "no input" >
</div>
<div class= "Form-group" >
<label for= "disabledselect" > Disabled dropdown box </label>
<select id= "Disabledselect" class= "Form-control" >
<option> not selectable </option>
</select >
</div>
<div class= "checkbox" >
<label>
<input type= "checkbox" > Unable to select
</label>
</div>
<button type= "Submit" class= "BTN btn-primary" > Submit </button >
</fieldset>
</form>

Effect Chart:

Form validation Status

When making a form, it is unavoidable to make form validation. You also need to provide validation status styles, which are also available in the bootstrap framework.

1. Has-warning: Warning Status (yellow)

2. Has-error: Error status (red)

3. Has-success: Success status (Green)

Many times, in the form of verification, different States will provide different icon, such as success is a check (√), error is a fork (x) and so on. This effect is also provided in the Bootstrap box. If you want the form to display icon in the corresponding state, simply add the class name "Has-feedback" in the corresponding state. Note that this class name is to be associated with "Has-error", "has-warning", and "has-success":

<form role= "Form" > <div class= "Form-group has-success" > <label class= "Control-label" for= " InputSuccess1 "> Success status </label> <input type=" text "class=" Form-control "id=" InputSuccess1 "placeholder=" Success Status "> </div> <div class=" Form-group has-warning "> <label class=" Control-label "for=" InputWarning1 " > Warning Status </label> <input type= "text" class= "Form-control" id= "inputWarning1" placeholder= "Warning status" > </div > <div class= "Form-group has-error" > <label class= "Control-label" for= "InputError1" > Error status </label
> <input type= "text" class= "Form-control" id= "InputError1" placeholder= "error status" > </div> </form> <br> <br> <br> <form role= "form" > <div class= "form-group has-success has-feedback" > < Label class= "Control-label" for= "InputSuccess1" > Success status </label> <input type= "text" class= "Form-control" id= "InputSuccess1" placeholder= "Success Status" > <span class= "Glyphicon Glyphicon-ok Form-contRol-feedback "></span> </div> <div class=" Form-group has-warning has-feedback "> <label class=" Control-label "for=" inputWarning1 "> Warning status </label> <input type=" text "class=" Form-control "id=" InputWarning1 "placeholder= warning Status" > <span class= "Glyphicon glyphicon-warning-sign form-control-feedback" > </span> </div> <div class= "Form-group has-error has-feedback" > <label class= "Control-label" for= " InputError1 > Error status </label> <input type= "text" class= "Form-control" id= "InputError1" placeholder= "Error status" > <span class= "Glyphicon glyphicon-remove form-control-feedback" ></span> </div> </form>

Effect Chart:

form hint Information

When making form validation, you should provide a different message. This effect is also provided in the bootstrap framework. A "Help-block" style is used to display the hints in chunks and display at the bottom of the control.

<form role= "Form" > <div class= "form-group has-success has-feedback" > <label class= "Control-label" for= " InputSuccess1 "> Success status </label> <input type=" text "class=" Form-control "id=" InputSuccess1 "placeholder=" Success Status "> <span class=" Help-block > you entered the information is correct </span> <span class= "Glyphicon Glyphicon-ok Form-control-feedback "></span> </div> <div class=" Form-group has-warning has-feedback "> < Label class= "Control-label" for= "inputWarning1" > Warning status </label> <input type= "text" class= "Form-control" id= "InputWarning1" placeholder= "Warning Status" > <span class= "help-block" > Please enter the correct information </span> <span class= " Glyphicon glyphicon-warning-sign form-control-feedback "></span> </div> <div class=" Form-group Has-error has-feedback "> <label class=" Control-label "for=" InputError1 "> Error status </label> <input type=" Text "class=" Form-control "id=" InputError1 placeholder= "error status" > <span class= "Help-block" > You enterThe information is wrong </span> <span class= "Glyphicon glyphicon-remove form-control-feedback" ></span> </div > </form>

Effect Chart:

The above is a small set to introduce the bootstrap form style of use, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!