<!--基础表单：
1.向父 <form> 元素添加 role="form"。
2.把标签label和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。因为form-group提供了margin
3.向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。-->

<form role="form">
 <fieldset>
  <legend>用户登录</legend>
  <div class="form-group">
   <label for="name">姓名</label>
   <input type="text" class="form-control" id="name" placeholder="请输入名称">
  </div>

  <div class="form-group">
   <label for="psd">密码</label>
   <input type="text" class="form-control" id="psd" placeholder="请输入密码">
  </div>

  <div class="checkbox">
   <label><input type="checkbox">记住密码</label>
  </div>
  <button type="submit" class="btn btn-default">登录</button>
 </fieldset>
</form>

<!-- 内联表单：
  如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline -->
 <form role="form" class="form-inline">
  <fieldset>
   <legend>用户登录</legend>
   <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" class="form-control" id="name" placeholder="请输入名称">
   </div>

   <div class="form-group">
    <label for="psd">密码</label>
    <input type="text" class="form-control" id="psd" placeholder="请输入密码">
   </div>

   <div class="checkbox">
    <label><input type="checkbox">记住密码</label>
   </div>
   <button type="submit" class="btn btn-default">登录</button>
  </fieldset>
 </form>

<!-- 横向表单：
  1.向父 <form> 元素添加 class .form-horizontal。
  2.把标签和控件放在一个带有 class .form-group 的 <div> 中。
  3.向标签添加 class .control-label。
  4.要实现横向表单，还要用栅格类-->
 <form role="form" class="form-horizontal">
  <fieldset>
   <legend>用户登录</legend>
   <div class="form-group">
    <label class="control-label col-lg-1" for="name">姓名</label>
    <div class="col-lg-10">
     <input type="text" class="form-control" id="name" placeholder="请输入名称">
    </div>
   </div>

   <div class="form-group">
    <label class="control-label col-lg-1" for="psd">密码</label>
    <div class="col-lg-10">
     <input type="text" class="form-control" id="psd" placeholder="请输入密码">
    </div>
   </div>
  </fieldset>
 </form>

//使用
<div class="checkbox">
 <label><input type="checkbox">学习前端</label>
</div>
<div class="radio">
 <label><input type="radio" name="optionsRadios" value="male">男生</label>
</div>
<div class="radio">
 <label><input type="radio" name="optionsRadios" value="female">女生</label>
</div>

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

<div class="form-group has-warning">
 <label for="inputWarning" class="control-label">输入长度不够!</label>
 <input type="text" class="form-control">
</div>
<div class="form-group has-error">
 <label for="inputError" class="control-label">输入不符合要求！</label>
 <input type="text" class="form-control">
</div>
<div class="form-group has-success has-feedback">
 <label for="inputSuccess" class="control-label">输入文本符合要求！</label>
 <input type="text" class="form-control" id="inputSuccess">
 <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

//相对定位，用于设置input元素的父容器的定位方式
.has-feedback {
 position: relative;
}
//右内边距的设置，以便可以显示小图标
.has-feedback .form-control {
 padding-right: 42.5px;
}
//设置小图标的显示方式
.form-control-feedback {
 position: absolute;//绝对定位
 top: 0;
 right: 0;//右对齐
 z-index: 2;
 display: block;
 width: 34px;
 height: 34px;
 line-height: 34px;
 text-align: center;
 pointer-events: none;
}
.input-lg + .form-control-feedback,
.input-group-lg + .form-control-feedback,
.form-group-lg .form-control + .form-control-feedback {
 width: 46px;
 height: 46px;
 line-height: 46px;
}
.input-sm + .form-control-feedback,
.input-group-sm + .form-control-feedback,
.form-group-sm .form-control + .form-control-feedback {
 width: 30px;
 height: 30px;
 line-height: 30px;
}
.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline,
.has-success.radio label,
.has-success.checkbox label,
.has-success.radio-inline label,
.has-success.checkbox-inline label {
 color: #3c763d;
}
.has-success .form-control {
 border-color: #3c763d;
 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.has-success .form-control:focus {
 border-color: #2b542c;
 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
}
.has-success .input-group-addon {
 color: #3c763d;
 background-color: #dff0d8;
 border-color: #3c763d;
}
.has-success .form-control-feedback {
 color: #3c763d;
}