源码解读Bootstrap表单
基础表单
对于基础表单，Bootstrap并未对其做太多的定制性效果设计，仅仅对表单内的fieldset、legend、label标签进行了定制。主要将这些元素的margin、padding和border等进行了细化设置。
这些元素如果使用了类名“form-control”，将会实现一些设计上的定制效果。
1. 宽度变成了100%
2. 设置了一个浅灰色（#ccc）的边框
3. 具有4px的圆角
4. 设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化
5. 设置了placeholder的颜色为#999
水平表单
在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：
1. 在<form>元素是使用类名“form-horizontal”。
2. 配合Bootstrap框架的网格系统。
在<form>元素上使用类名“form-horizontal”主要有以下几个作用：
1. 设置表单控件padding和margin值。
2. 改变“form-group”的表现形式，类似于网格系统的“row”
如果要将表单的控件都在一行内显示，在<form>元素中添加类名“form-inline”即可。
表单控件
单行输入框
input的type属性值为text
下拉选择框
单行的下拉选择框直接用select标签，
多行的滚动选择框要加上multiple属性，如：<select multiple>
文本域
文本域textarea和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。
复选框和单选框
Bootstrap框架中checkbox和radio有点特殊，Bootstrap针对他们做了一些特殊化处理，checkbox和radio与label标签配合使用会出现一些小问题（如对齐问题）得以解决。例如：
<form role="form"> <div> <label> <input type="checkbox" value=""> 记住密码 </label> </div> <div> <label> <input type="radio" value="love" checked> 喜欢 </label> </div> <div> <label> <input type="radio" value="hate"> 不喜欢 </label> </div> </form>
我们可以发现，
1. 不管是checkbox还是radio都使用label包起来
2. checkbox连同label标签放置在一个名为“.checkbox”的容器内
3. radio连同label标签放置在一个名为“.radio”的容器内
在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式。
源码：
.radio, .checkbox { display: block; min-height: 20px; padding-left: 20px; margin-top: 10px; margin-bottom: 10px; } .radio label, .checkbox label { display: inline; font-weight: normal; cursor: pointer; } .radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] { float: left; margin-left: -20px; } .radio + .radio, .checkbox + .checkbox { margin-top: -5px; }
复选框和单选按钮水平排列
如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”;
如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”。
例如：
<form role="form"> <div> <label> <input type="radio" value="option1">男性 </label> <label> <input type="radio" value="option2">女性 </label> <label> <input type="radio" value="option3">中性 </label> </div> </form>
实现源码：
.radio-inline, .checkbox-inline { display: inline-block; padding-left: 20px; margin-bottom: 0; font-weight: normal; vertical-align: middle; cursor: pointer; } .radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline { margin-top: 0; margin-left: 10px; }
表单控件大小
可以通过设置控件的height，line-height，padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是：
1. input-sm:让控件比正常大小更小
2. input-lg:让控件比正常大小更大
这两个类适用于表单中的input，textarea和select控件。
实现源码如下：
.input-sm { height: 30px; padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } select.input-sm { height: 30px; line-height: 30px; } textarea.input-sm, select[multiple].input-sm { height: auto; } .input-lg { height: 46px; padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px; } select.input-lg { height: 46px; line-height: 46px; } textarea.input-lg, select[multiple].input-lg { height: auto; }
表单控件状态
焦点状态
焦点状态的实现源码如下：