Bootstrap表单

一、表单布局

Bootsrap的表单布局有三种类型

1、垂直表单

2、内联表单

3、水平表单

二、垂直表单又称基本表单，创建基本表单的步骤

1.向父form标签添加role="form"

2.把标签和控件放在一个类名为form-group的div中，获得最佳间距

3.向所有的文本标签input,textarea,select添加.form-control类

结果如下：

三、内联表单

 

1.创建内联表单，只需在垂直表单的基础上，为form标签添加类.form-inline

2.内联表单的所有元素都是内联的，向左对齐，标签并排

3.Bootstrap中的input,select,tetarea标签有100%的宽度，

4.可以使用类.sr-only隐藏内联表单的某个元素

 

结果如下：

四、水平表单

创建水平表单的步骤：

向父标签添加类.form-horizontal，改变.form-group的行为，并使用Bootstrap预置的栅格class将label和控件组水平并排布局

把标签和控件放在一个带有.form-group类的div中

1. 向标签添加.control-label类
2. 

结果如下：