HTML笔记（四）bootstrap之form表单

表单共分三种

①垂直表单（默认）

②内联表单

③水平表单

文本标签要加上control-label类修饰，其实control-label 具有靠右对齐功能

input标签加上form-control类修饰，使输入框更加好看

form-group相当于段落标签，就是两个表单元素之间的间距变大了，即增加了margin-bottom

–

1.垂直或基本表单

创建基本表单的步骤：

1.向父元素添加role=”form”

2.把标签和控件放在一个带有

class="form-group"

的

<div>

中。这是获取最佳间距所必需的。

3.向所有的文本元素

<input>

、

<textarea>

和

<select>

添加

class="form-control"

2.内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向

<form>

标签添加

class .form-inline

。

默认情况下，Bootstrap中的input、select和textarea有100%宽度，所以在使用内联表单时 ，需要在表单控件上设置一个宽度。

使用

class="sr-only"

可以隐藏内联表单的标签

3.水平表单

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行

①向父

<form>

元素添加 class .form-horizontal。

②把标签和控件放在一个带有 class .form-group 的

<div>

中。

③向标签添加 class .control-label。