Bootstrap_ Form _ Form Controls

One, input box inputs

A single-line input box, a common text input box, that is, the Type property value of input is text.

You must also add a type when using input in bootstrap, and if you do not specify a type, you will not get the correct style because the bootstrap framework is passed input[type= "?"]

(where the. number represents the type, for example, the text type, which corresponds to the input[type= "text"]) to define the style.

To make the control style in various form styles error-prone, you need to add the class name ". Form-control".

<formrole= "form"><Divclass= "Form-group"><inputtype= "Email"class= "Form-control"placeholder= "Enter Email"></Div></form>

Second, drop-down selection box select

The drop-down selection box in the bootstrap frame uses the same as the original, and the multiline selection sets the value of the multiple property to multiple.

<formrole= "form"><Divclass= "Form-group">  <Selectclass= "Form-control">    <option>1</option>    <option>2</option>    <option>3</option>    <option>4</option>    <option>5</option>  </Select>  </Div>  <Divclass= "Form-group">  <SelectMultiple Class= "Form-control">    <option>1</option>    <option>2</option>    <option>3</option>    <option>4</option>    <option>5</option>  </Select></Div></form>

Third, text field textarea

The text field, like the original use method, sets rows to define its height, and the setting cols can set its width.

However, if the class name ". Form-controL" class name is added to the TEXTAREA element, you do not need to set the Cols property.

Because the "Form-control" style in the bootstrap frame has a form control width of 100% or auto.

  <formrole= "form">    <Divclass= "Form-group">      <textareaclass= "Form-control"rows= "3"></textarea>    </Div>  </form>

Four, check box checkbox and single Select button Radio

1, whether it is a checkbox or radio use label wrapped up
2. The checkbox, together with the label label, is placed in a container named ". CheckBox"
3, radio with label label placed in a container named ". Radio"

<formrole= "form"><Divclass= "checkbox"><label><inputtype= "checkbox"value="">Remember the password</label></Div><Divclass= "Radio"><label><inputtype= "Radio"name= "Optionsradios"ID= "OPTIONSRADIOS1"value= "Love"checked>like</label></Div><Divclass= "Radio"><label><inputtype= "Radio"name= "Optionsradios"ID= "OptionsRadios2"value= "Hate">don't like</label></Div></form>

Five, check boxes and radio buttons are arranged horizontally

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

<formrole= "form">  <Divclass= "Form-group">    <labelclass= "Checkbox-inline">      <inputtype= "checkbox"value= "Option1">Game</label>    <labelclass= "Checkbox-inline">      <inputtype= "checkbox"value= "Option2">Photography</label>    <labelclass= "Checkbox-inline">    <inputtype= "checkbox"value= "Option3">Travel</label>  </Div>  <Divclass= "Form-group">    <labelclass= "Radio-inline">      <inputtype= "Radio"value= "Option1"name= "Sex">male</label>    <labelclass= "Radio-inline">      <inputtype= "Radio"value= "Option2"name= "Sex">female</label>    <labelclass= "Radio-inline">      <inputtype= "Radio"value= "Option3"name= "Sex">Neutral</label>  </Div></form>

VI. Form Control size

The bootstrap framework also provides two different class names to control the height of the 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 apply to Input,textarea and select controls in a form.

<inputclass= "Form-control input-lg"type= "text"placeholder= "Add. Input-lg, control becomes larger"><inputclass= "Form-control"type= "text"placeholder= "normal Size"><inputclass= "Form-control input-sm"type= "text"placeholder= "Add. Input-sm, control becomes smaller">

Bootstrap_ Form _ Form Controls