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。