Bootstrap源码解读表单（2）

源码解读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 class="form-control">

文本域

文本域textarea和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。

复选框和单选框

Bootstrap框架中checkbox和radio有点特殊，Bootstrap针对他们做了一些特殊化处理，checkbox和radio与label标签配合使用会出现一些小问题（如对齐问题）得以解决。例如：

<form role="form">  <div class="checkbox">    <label>      <input type="checkbox" value="">      记住密码    </label>  </div>  <div class="radio">    <label>      <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>      喜欢    </label>  </div>  <div class="radio">    <label>      <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">      不喜欢    </label>  </div></form>

我们可以发现，
1. 不管是checkbox还是radio都使用label包起来
2. checkbox连同label标签放置在一个名为“.checkbox”的容器内
3. radio连同label标签放置在一个名为“.radio”的容器内
在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式。