3.5.4　表单控件

3.5.4　表单控件

在默认的Bootstrap源码里，对input、select、testarea都有良好的支持，尤其是对现有HTML5语法下的input都进行了支持（如type为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元素的使用方式和原始的一致，多行选择设置mulitiple属性为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，通常在使用的过程中和label文字搭配，但通常会出现左右边距对不齐的问题。为此，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或者radio元素中文本很少，可能需要横向显示，为此Bootstrap也提供了相应的内联样式.checkbox-inline和.radio-inline，效果如图3-23所示。

3.5.4　表单控件 - 图1 图3-23　checkbox和radio元素运行效果

使用方式如下：

<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 */
}

3.5.4 表单控件