bootstrap的表单

[img]http://dl2.iteye.com/upload/attachment/0107/2921/4b747c93-b245-3037-938c-44fd93d12ed7.png[/img]

[img]http://dl2.iteye.com/upload/attachment/0107/2923/1a210216-58c6-3d5f-a538-5dc846c8de3a.png[/img]


表单种类：默认，内联，横向

统一要求：
用外部容器div包括住所包含的同类元素label,input
给div添加form-group
每个组之间有一定的margin-bottom

input中需要定义好type的类型，然后placeholder就是显示本来的内容


不同之处：

1.checkbox的那个div则用checkbox类即可

2.内联表单，最外层form中调用form-inline的类

3.input中的type的默认是text。添加效果就是调用form-control

重点：横向表单

1.form中调用form-horizontal，每组的div也是form-group
（这步会改变form-group）
2.所以label和input调用栅格系统分配长度

3.label中col-lg-1，control-label（往右靠）

4.input则再用一个div定义大小class="col-lg-11"

5.登陆按钮和checkbox也用div定义一个，然它们往右靠
(col-lg-offset-2)


[size=medium][b]延伸1：[/b][/size]
1.当输入框要控制大小的时候，我们在外边添加一个设置了大小的div
然后col-lg-x就是当前大小下的比例、
2.外面的添加一个div调用row的方法

[size=medium][b]延伸2：[/b][/size]
当在input框中添加图标，输入框父元素的定位方式为相对定位，然后设置这种小图标的定位方式为绝对定位。
在bootstrap中则在div中添加has-feedback
然后再span中添加glyphicon glyphicon-ok form-control-feedback

[size=medium][b]延伸3：[/b][/size]
控制按钮的大小不随文字而延伸。可以在button外的div外再加一个div调用row。然后里面div可以引用栅格的