3.5.1　基础表单

Bootstrap对基础表单未做太多的定制化效果设计，默认都使用全局设置，只是对表单内的fieldset、legend、label标签进行了设定，将这些元素的margin、padding、border等进行了细化设置。详细请参考源码1854行以后的代码。

如果在select、input、textarea元素上应用了.form-control样式，显示的宽度会变成100%，并且placeholder的颜色都设置成了#999999。主要源码如下：

  1. // 源码1689行
  2. .form-control {
  3.   display: block;
  4.   width: 100%;                          /* 设置宽度是100% */
  5.   /* 省略部分设置 */
  6.   border: 1px solid #ccc;               /* 边框设置 */
  7.   border-radius: 4px;                   /* 圆角设置*/
  8.   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  9.           box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  10.   -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  11.           transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  12. }
  13. .form-control:focus {
  14.   border-color: #66afe9;                        /* 作用域得到焦点时的边框颜色*/
  15.   outline: 0;
  16.   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 
  17.       233, .6);
  18.           box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 
  19.               233, .6);
  20. }
  21. .form-control:-moz-placeholder {  color: #999;
  22.                                                 /* placeholder的文本颜色:moz浏览器*/}
  23. .form-control::-moz-placeholder {  color: #999;
  24.                                 /* placeholder的文本颜色:moz浏览器*/  opacity: 1;}
  25. .form-control:-ms-input-placeholder {  color: #999;
  26.                                                 /* placeholder的文本颜色:IE浏览器*/}
  27. .form-control::-webkit-input-placeholder {  color: #999;
  28.                                                 /* placeholder的文本颜色:webkit浏览器*/}
  29. 使用方式如下：
  30.     <form>
  31.        <fieldset>
  32.          <legend>用户登录</legend>
  33.          <div class="form-group">
  34.              <label>登录账户</label>
  35.              <input type="email" class="form-control" placeholder="请输入你
  36.                  的用户名或Email">
  37.          </div>
  38.          <div class="form-group">
  39.              <label>密码</label>
  40.              <input type="text" class="form-control" placeholder="请输入你的密码">
  41.          </div>
  42.          <div class="checkbox">
  43.              <label><input type="checkbox">记住密码</label>
  44.          </div>
  45.          <button type="submit" class="btn btn-default">登录</button>
  46.        </fieldset>
  47.     </form>

运行效果如图3-20所示。

3.5.1　基础表单 - 图1 图3-20　普通表单运行效果

注意

在上例中，提示语label和input元素放在一个样式为.form-group的div里了。.form-group样式提供了一个margin-bottom:15px的底部外边距，所以可以很清晰地看到每一组控件。