.form-control:将样式设置为width为100%,圆角边框,适当的蓝色阴影...
格式:
注意:只有正确设置了输入框的type类型,才能被赋予正确的样式。
2.内联表单
.form-inline:让表单左对齐浮动,排成一行
3.表单合组
.input-group:和form-group作用一样,在合组的时候使用
.input-group-addon:要合组的一个元素
合组
4.水平排列
.form-horizontal:水平排列的表单,通过为表单添加.form-horizontal类,并联合使用Bootstrap预置的栅格类,可以将label标签和控件组水平并排布局。这样做将改变.form-group的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加.row了
5.单选复选框
.checkbox:复选框的父级元素使用,将复选框变为块级元素
.checkbox-inline:复选框的父级元素使用,将复选框拍成一行
.radio:单选框的父级元素使用,将单选框变为块级元素
.radio-inline:单选框的父级元素使用,将单选框拍成一行
选择1
选择2
6.下拉列表
.from-control:将样式设置为width为100%,圆角边框,适当的蓝色阴影...
下拉列表1下拉列表27.校验状态
改变获取焦点时边框和阴影的颜色
.has-error:错误的红色
.has-success:成功的绿色
.has-warning:警告的黄色
.control-label:标签同步相应状态
格式:
用户
control-label这个类是label同步相应的状态
8.添加额外的图标
.has-feedback:设置一个位置
.form-control-feedback:设置一个元素,相对于有has-feedback类的元素定位
.glyphiconglyphicon-ok:对号图标
.glyphicon-warning-sign:警告图标
glyphicon-remove:错误图标
....
给span设置form-control-feedback这个类,让它相对于has-feedback进行定位,定位到input框里面的右侧