Bootstrap study notes (i)-----form

Horizontal form Effect

To achieve a horizontal form effect in the bootstrap framework, the following two conditions must be met:
1. Use the class name "Form-horizontal"on the <form> element.
2, with the bootstrap frame grid system.

Inline form effects

Sometimes we need to display the form's controls in one line, just add the class name "Form-inline" to the <form> element.

Form control style

You need to add "Form-control"when the form focus is BOOTSTAP style:

1, the width becomes 100%

2. A light gray (#ccc) border is set

3, with 4px rounded corners

4. Shadow and border effects change when the shadow effect is set and the element gets focus

5, set the color of the placeholder for #999

Select Multi-line display

<select class= "multiple Form-control" ></select>

Bootstrap form Control size

. INPUT-LG Large

. INPUT-SM Small

Can be used to control <select><textarea><text>

<form role="form"> <divclass="Form-group"> <labelclass="Control-label"> control becomes larger </label> <inputclass="Form-control INPUT-LG"Type="text"Placeholder="Add. Input-lg, control becomes larger"> </div> <divclass="Form-group"> <labelclass="Control-label"> Normal size </label> <inputclass="Form-control"Type="text"Placeholder="Normal Size"> </div> <divclass="Form-group"> <labelclass="Control-label"> control becomes smaller </label> <inputclass="Form-control INPUT-SM"Type="text"Placeholder="Add. Input-sm, the control becomes smaller"> </div> </form>

Form>form-group>form-control

form Buttons

Default Style <button class= "BTN" ></button>

Primary:<button class= "btn btn-primary" ></button>

Info: <button class= "btn btn-info" ></button>

Success:<button class= "btn btn-success" ></button>

Warning:<button class= "btn btn-warning" ></button>

Danger:<button class= "btn Btn-danger" ></button>

Inverse:<button class= "btn btn-inverse" ></button> personal feel and default style almost

form controls (check boxes and radio buttons are arranged horizontally)

The parent of input label plus class "checkbox-inline< Span style= "color: #800000;" > or radio-inline Span style= "color: #800000;" >

<label  class="checkbox-inline">       < Input type="checkbox" value="  Game   "/> Games </label>

<labelclass="radio-inline" > <input type= "    Radio< Span style= "color: #800000;" > "value=   "  game  Span style= "color: #800000;" >  game 
 </label>   

      

 <form role= form   " > <div class  ="  form-group   > <label class  = checkbox-inline   " > <input type="  checkbox " value="   Game  /> game  </label> 

<label  class="checkbox-inline" >            <input type="checkbox" Value=" film "/> film </label>          

</div> </form>

<form role="form"> <divclass="Form-group"> <labelclass="Radio-inline"> <input type="Radio"Value="Option1"Name="Sex">male</label> <labelclass="Radio-inline"> <input type="Radio"Value="Option2"Name="Sex">female</label> <labelclass="Radio-inline"> <input type="Radio"Value="Option3"Name="Sex">Neutral</label> </div></form>

Code style

<code> put in the middle of the code </code>

Bootstrap study notes (i)-----form