Bootstrap CSS Layout

Smart-form

Single-line elements: generally included with Div, class= "Row"

Column elements: Included with section, class= "Col col-x" (sections with Margin-bottom, div if you want to remove)

Buttons and elements are generally used label,class= "type", which contains element tags and span,span within the display content.

Smart-form with Row and Col, no other place, row function is just margin:-14px 0

Bootstrap FORM element:

Form's class= "Form-horizontal", vertically arranged forms

Each area of the form is split with a section, without a class

Section area heading with <legend> tags.

One line element with <div class= "Form-group" >

Display labels by: <label class= "Control-label col-md-2" >small input</label>

Note in the input box with

<div class= "Col-md-10" >
<input class= "Form-control input-xs" placeholder= ". Input-xs" type= "text" >
</div>

Example:

<fieldset>                                                <legend>Input Sizes</legend>                                                                                                <Divclass= "Form-group">                                                    <labelclass= "Control-label col-md-2">Extra Small Input</label>                                                    <Divclass= "Col-md-10">                                                        <inputclass= "Form-control input-xs"placeholder= ". Input-xs"type= "text">                                                    </Div>                                                </Div>                                                <Divclass= "Form-group">                                                    <labelclass= "Control-label col-md-2">Small Input</label>                                                    <Divclass= "Col-md-10">                                                        <inputclass= "Form-control input-sm"placeholder= ". Input-sm"type= "text">                                                    </Div>                                                </Div>                                                <Divclass= "Form-group">                                                    <labelclass= "Control-label col-md-2">Default Input</label>                                                    <Divclass= "Col-md-10">                                                        <inputclass= "Form-control"placeholder= "Default input"type= "text">                                                    </Div>                                                </Div>                                                <Divclass= "Form-group">                                                    <labelclass= "Control-label col-md-2">Large Input</label>                                                    <Divclass= "Col-md-10">                                                        <inputclass= "Form-control input-lg"placeholder= ". Input-lg"type= "text">                                                    </Div>                                                </Div>                                                            </fieldset>

Approximate structure:

-xs min,-sm small, normal normal,-LG large

. col-**-offset-sets how much to offset.

Bootstrap CSS Layout