学习Bootstrap3之基本表单

表单由 form 容器，
输入描述组.form-group>(label+input.form-control),
单选复选组.checkbox>label>(input+text)，
和其它帮助文本.help-block、操作按钮button组成。
从排列方式看由堆叠表单、栅格表单、内联表单3种组成。

---

一、堆叠表单

所有输入组合都上下堆叠排列，label与输入控件也上下堆叠。

• .form-group 负责15px下边距，包容输入组并让输入组隔开。
• lable 内联块，粗体，有5px的下边距，与输入框隔开。
• .form-control 修饰所有的输入控件，它块级化，宽度100%, 有边框，内补，圆角，阴影，过渡。
• .help-block 块级描绘文本，一般是p标签，上5px, 下10px间隔，字体灰色

.form-group 结构为 .form-group>(label+.form-control+.help-block)

• 单选与复选稍有不同，它们的控件与描述不换行，用 .checkbox 或者 .radio 包容，有上下 10px 外边距。label有左内补， 控件会绝对定位到 0,0, 文本因为label的内补而右移。

单选复选组结构为 .checkbox>label>input+text

• 按钮可以自然靠左，没有上下间隔要求时不用添加容器div。

image.png

二、内联表单

内联表单所有的控件都排列在同一行，通常在导航栏上出现，快速登录，搜索。

• 添加 form-inline。
• form-control 默认为 100%, 所以很多时候要手动设置宽度。
• 一定添加label, 否则屏幕阅读器无法正确识别，标签添加 .sr-only 进行隐藏。
• 输入框添加 placeholder 属性。
• 按钮要外包一层 .form-group以便浮动。
  也可以直接以行内块跟随。

image.png

三、栅格表单

表单运作流程和栅格一样，由行列构成。

• .form-horizontal 赋予表单栅格的机制。
• .form-group 代替 .row 的身份。
• 必须添加 .control-label 进行块级化，然后再加上列标记 .col-xs-3。
• .form-control 输入框必须外加一层
  代表 col, 再加上列标记 .col-xs-9
• 对于单选复选框、按钮，它们都不兼备栅格能力，只能直接在外部添加两层栅格结构 .form-group>.col-xs-9.col-xs-offset-3, 因为它们没有描述名称, 直接使用栅格偏移特性进行对齐第二列。

image.png

四、内联的单选复选框

在.checkbox 或者 .radio 中的label, 其实就是内联的，也就是说，多个嵌套的单选复选框会水平放置，只是没有间距。
.checkbox 与 .radio 提供上堆叠的上下间隔 10px。

• .checkbox-inline 与 .radio-inline 提供了相对定位与单元之间的水平间距。
• 必须添加.form-group 来获得上下间距，当然使用以前的 .checkbox 或者 .radio 也是可以的。

五、静态文本控件

在修改表单的时候，有些值是已知的，而已不能再次修改， 这个时候使用 p.form-control-static 来显示只读的控件值。

• 类似的还有一个帮助文本.help-block，是一个灰色的有上下边距的块级文本，用来补充说明控件的作用与注意事项。

六、控件状态

控件状态只读readonly、禁用disabled两个属性控件的状态。

• 内的所有控件，都可以使用它的禁用属性来全体禁用。Internet Explorer 11 及以下浏览器中这个特性并不完整兼容，必须使用js来辅助实现。

七、校验状态

校验状态使用不同颜色的文本与控件边框来表现这个控件的校验情况。
但在屏幕阅读器上是不可见的，必须通过一些属性来标记它，比如 aria-invalid="true"

• 实现方式是在 .form-group 上追加样式 has-success, has-warning, has-error 来修改呈现。
• 在单复选框组合上，要再次外包一个 div.has-success 来呈现。
• checkbox help-block 的文本会显示校验颜色。

八、添加反馈图标

可以为输入控件的右侧添加一个图标。

添加反馈图标

• 在 .form-group 上追加 has-feedback。
• 在 .from-control 下添加一个 的 .glyphicon 图标， 这个图标必须添加 .form-control-feedback, 图标会自动定位在输入框的右内侧。
• 使用样式.has-feedback label~.form-control-feedback{top: 25px} 实现。
• .has-feedback 相对定位，并控制输入框右侧的内补放置图标。
• 同样屏幕阅读器无法识别这个图标，可以再追加一个 sr-only 的span来说明图标。

九、控件尺寸

通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。

• 共有三个高度， .input-lg 大输入框， .input-sm 小输入框，和默认高度。
• 宽度的话，要么手动写死， 要么借助栅格系统 col-sm-* 来定制。