Bootstrap 手册 03 - 表单篇

HTML 表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

0. 表单控件

Bootstrap 并未对表单做太多的定制性效果设计，仅仅对表单内的 fieldset、legend 和 label 标签进行了定制；主要将这些元素的 margin、padding 和 border 还有 input、select、textarea 等进行了细化设置；

• .form-control
• 控件宽度均为 100%；
• 具有浅灰色 #ccc 边框；
• 具有 4px 圆角；
• 设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化；
• 设置了 placeholder 的颜色为 #999；

1. 水平表单

Bootstrap 默认表单是垂直显示风格，但很多时候我们需要的水平表单风格（标签居左，表单控件居右）；

此处输入图片的描述

• form.form-horizontal，配合栅格系统使用；
• 设置表单控件 padding 和 margin 值；
• 改变 .form-group 的表现形式，类似于栅格系统的 .row；

2. 内联表单

• form.form-inline
• 若在 input 前面添加 label ，会导致 input 换行显示；若必须添加这样的一个 label 且不想让 input 换行，需要将 label 标签也放在容器 .form-group 中；即 form.form-inline>.form-group>(label.sr-only+input.form-control)；

3. 输入框 input

• form>.form-group>input.form-control[type="（该属性必须）"]

4. 下拉选择框 select

• select.form-control[multiple="multiple"]>option

5. 文本域 textarea

• textarea.form-control
• 无需设置 cols 属性（因为 .form-control 样式的表单控件宽度为 100% 或 auto），rows 则仍然有效；

6. 复选框 checkbox 和单选择按钮 radio

Bootstrap 中针对 checkbox 和 radio 做了一些特殊化处理，主要是 checkbox 和 radio 与 label 标签配合使用会出现一些小问题（最头痛的是对齐问题）。

• form>.checkbox>label>input[type="checkbox" value=""]
• form>(.radio>label>input[type="radio" name="yesOrNo" value="yes"])+(.radio>label>input[type="radio" name="yesOrNo" value="no"])
• checkbox 和 radio 均需用 label 包裹；
• 如需水平排列 checkbox，使用 label.checkbox-inline；
• 如需水平排列 radio，使用 label.radio-inline；

7. 控件设置

7.1. 控件大小

• 两个用来控制表单控件高度的类名，适用于表单中的 input，textarea 和 select 控件；
  • input-sm：让控件比正常大小更小；
  • input-lg：让控件比正常大小更大；
• input-sm 和 input-lg 仅对控件高度做了处理；当需要对控件宽度做变化处理时，使用栅格系统；

7.2. 控件焦点状态

• .form-control
• 由伪类 :focus 实现；
• 注意，file、radio 和 checkbox 控件在焦点状态下的效果也与普通的 input 控件不太一样；

7.3. 控件禁用状态

• .form-control[disabled]

7.4. 控件验证状态

• 在 .form-group 容器上增加类名，指示验证状态，用于告知操作是否正确等；
  • .has-warning：警告状态（黄色）；
  • .has-error：错误状态（红色）；
  • .has-success：成功状态（绿色）；
• 可添加验证状态 icon，这类 icon 均居右；
  1. 在验证类名所在元素上添加 has-feedback 类名；
  2. 再在相应位置添加 span.glyphicon.glyphicon-warning-sign.form-control-feedback；

7.5. 表单提示信息

• span.help-block / span.help-inline 包裹提示信息，置于控件底部；