Bootstrap 手册 03 - 表单篇
2017-03-27 本文已影响76人
EncyKe
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 均居右；
- 在验证类名所在元素上添加
has-feedback类名； - 再在相应位置添加
span.glyphicon.glyphicon-warning-sign.form-control-feedback；
- 在验证类名所在元素上添加
7.5. 表单提示信息
-
span.help-block/span.help-inline包裹提示信息，置于控件底部；
