表单

1，基础表单

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

// 源码1689行
.form-control {
  display: block;
  width: 100%;                          /* 设置宽度是100% */
  /* 省略部分设置 */
  border: 1px solid #ccc;               /* 边框设置 */
  border-radius: 4px;                   /* 圆角设置*/
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
  border-color: #66afe9;                        /* 作用域得到焦点时的边框颜色*/
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-control:-moz-placeholder {  color: #999;/* placeholder的文本颜色:moz浏览器*/}
.form-control::-moz-placeholder {  color: #999;/* placeholder的文本颜色:moz浏览器*/  
　　opacity: 1;}
.form-control:-ms-input-placeholder {  color: #999;/* placeholder的文本颜色:IE浏览器*/
}
.form-control::-webkit-input-placeholder {  color: #999;/* placeholder的文本颜色:webkit浏览器*/
}

    <form>
       <fieldset>
         <legend>用户登录</legend>
         <div class="form-group">
             <label>登录账户</label>
             <input type="email" class="form-control" placeholder="请输入你的用户名或Email">
         </div>
         <div class="form-group">
             <label>密码</label>
             <input type="text" class="form-control" placeholder="请输入你的密码">
         </div>
         <div class="checkbox">
             <label><input type="checkbox">记住密码</label>
         </div>
         <button type="submit" class="btn btn-default">登录</button>
       </fieldset>
    </form>

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

2.内联表单

 　 有的时候，我们可能需要一个所有控件都在一行中的表单，要实现这种内联样式效果，只需要在普通的form元素上应用一个.form-inline样式，即可将表单内的元素设置为内联样式。

　　水平线上的唯一因素就是要控制元素的显示方式为display:inline-block，该.form-inline样式只能在大于768像素的浏览器上才能应用。源码如下：

// 源码1927行
@media (min-width: 768px) {             /* 大于768像素的浏览器才生效*/
  .form-inline .form-group {
    display: inline-block;              /* 内联样式显示*/
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline .form-control {
    display: inline-block;/* 内联样式显示,但由于form-control样式设置了100%的宽度,所以没什么用*/
    width: auto;
    vertical-align: middle;
  }
  .form-inline .radio,
  .form-inline .checkbox {
    display: inline-block;
    padding-left: 0;
    margin-top: 0;  /* 确保上下居中*/
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline .radio input[type="radio"],
  .form-inline .checkbox input[type="checkbox"] {
    float: none;  /* 不使用浮动定位*/
    margin-left: 0;
  }
  .form-inline .has-feedback .form-control-feedback {  top: 0;  }
}

　　要注意，由于默认样式为.form-control，在直接使用内联表单的时候是无效的，需要对这些控件元素单独设置宽度width，或者外面再加上一层带有.form-group样式的div元素。

    <form class="form-inline">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入你的用户名">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入你的密码">
        </div>
        <div class="checkbox">
            <label><input type="checkbox">记住密码</label>
        </div>
        <button type="submit" class="btn btn-default">登录</button>
    </form>

3.横向表单

 　　横向表单与内联表单的使用方式不太一样，其不能在form元素上简单应用一个.form-horizontal样式，这是因为.form-horizontal样式本身没有做什么特殊的设置，只是简单设置了一下相关的padding和margin。源码如下：

// 源码1959行
.form-horizontal .control-label,
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {     /* 简单设置了一下padding和margin */
  padding-top: 7px;
  margin-top: 0;
  margin-bottom: 0;
}
.form-horizontal .radio,.form-horizontal .checkbox {  min-height: 27px;}/* 设置最小高度 */
.form-horizontal .form-group {          /* 简单设置了一下margin */
  margin-right: -15px;  margin-left: -15px;
}
.form-horizontal .form-control-static {  padding-top: 7px; }
@media (min-width: 768px) {
  .form-horizontal .control-label { text-align: right;}/* 大屏幕下,label可以居右显示 */  
}

　　所以，要实现横向表单，不仅要应用上述样式，还要使用Bootstrap预制的栅格类，以便将label和控件水平并排布局。

 

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="account" class="col-sm-2 control-label">用户名</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id="account" placeholder="请输入你的用户名">
        </div>
    </div>
    <div class="form-group">
        <label for=" password " class="col-sm-2 control-label">密码</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="password" placeholder="请输入你的密码">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <div class="checkbox"><label><input type="checkbox">记住密码</label></div>
        </div>
    </div>
    <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
       <button type="submit" class="btn btn-default">登录</button>
    </div>
    </div>
</form>