表单控件

　　在默认的Bootstrap源码里，对input、select、testarea都有良好的支持，尤其是对现有HTML5语法下的input都进行了支持(如text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel、和color的元素)。

1 input元素

 　　在使用input元素的时候，必须声明type类型，否则会引起其他的问题，因为Bootstrap在定义这些样式的时候都指定了type类型，比如，input[type="text"]。

<input type="text" placeholder=“文本输入框”>

2 Select元素

　　下拉列表select元素的使用方式和元素的一致，多行选择设置multiple属性为multiple即可。Bootstrap会为这些默认的元素提供统一风格的显示。

    <select>
        <option>1</option>
    </select>
    <select multiple="multiple">
        <option>1</option>
        <option>2</option>
    </select>

3 textarea元素

 　　同样，在textarea元素里定义了rows数字即可定义大文本框的高度，定义cols即可定义大文本框的宽度。但是如果在该框架上应用了.form-control样式，则cols属性起不了作用，因为.form-control样式的表单控件都设置了100%的宽度(或auto)。所以，一旦设置了该样式，就不需要再设置cols属性了。

<textarea class="form-control" rows="3"></textarea>

4 checkbox和radio

 　　checkbox和radio是input元素里两个非常特殊的type，通常在使用的过程中和lable文字搭配，但通常会出现左右边距对不齐的问题。为此，Bootstrap进行了标准设置，开发人员在使用的过程中遵循如下方式即可：

<div class="checkbox">
    <label><input type="checkbox" value="">是否想赚大钱？</label>
</div>
<div class="radio">
    <label><input type="radio" name="optionsRadios" value="female" checked>请确保,您喜欢女人？</label>
</div>
<div class="radio">
    <label><input type="radio" name="optionsRadios" value="male">请确保,您喜欢男人？</label>
</div>

　　即使用的时候，每个input外部都要用label包住，并且在最外层用容器元素包住，并应用相应的.checkbox和.radio样式，主要源码如下:

// 源码1741行
.radio,
.checkbox {             /* 让单选框和复选框都能左右和上下居中 */
  display: block;
  min-height: 20px;
  padding-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.radio label,
.checkbox label {               /* 内部有label的话,内联显示 */
  display: inline;
  font-weight: normal;
  cursor: pointer;
}

　　有些checkbox或者raido元素中文本很少，可能需要横向显示，为此Bootstrap也提供了相应的内联样式.checkbox-inline和.radio-inline.

<label class="checkbox-inline">
    <input type="checkbox" value="体育" id="inlineCheckbox1">体育
</label>
<label class="checkbox-inline">
    <input type="checkbox" value="音乐" id="inlineCheckbox2">音乐
</label>
…
<label class="radio-inline">
    <input type="radio" value="未知" id="Radio3">未知
</label>

// 源码1766行
.radio-inline,
.checkbox-inline {  /* 在其他元素上设置*-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;  /* 每个选项间距10px */
}