Bootstrap 表单

基本表单（输入框站一行）

<form role="form">
    
        <div class="group-form">
            <label for="username">姓名：</label>
            <input type="text" class="form-control" id="username"  placeholder="请输入姓名">
        </div>

        <div class="group-form">
            <label for="uploadfile">上传文件</label>
            <input type="file" id="uploadfile" >
            <p class="help-block">使用说明</p>
        </div>

        <div class="checkbox">
            <label>
                <input type="checkbox" >选我
            </label>
            
        </div>
        <button type="submit" class="btn btn-default">提交</button>

</form>

全部表单显示在一行：form-inline

隐藏lable： sr-only

紧贴input

<form class="form-inline">
    <div class="form-group">
        <label>姓名：</label>
        <div class="input-group">
            <div class="input-group-addon">紧跟</div>
            <input type="text" class="form-control">
        </div>
    </div>
</form>

水平表单（和栅格结合）：

<form class="form-horizontal">
    <div class="form-group">
        <label for="username2" class="col-sm-2 control-label">姓名：</label>
        <div class="col-sm-10">
            <input type="text " class="form-control"  id="username2">
        </div>
    </div>
    
</form>

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

多选框和单选框： .radio .checkbox .disabled  

 <div class="checkbox disabled">
      <label>
          <input type="checkbox" value="" disabled >选项1
      </label>
  </div>
 
 <div class="radio">
     <label>
         <input type="radio" name="sel">单选1
     </label>
 </div>
  <div class="radio">
     <label>
         <input type="radio" name="sel">单选2
     </label>
 </div>

选框在同一行： .radio-inline .checkbox-inline

<label class="radio-inline ">
    <input type="radio" name="sel1">
</label>
<label class="radio-inline">
    <input type="radio" name="sel1">
</label>

下拉表：

<select class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

<select multiple class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

水平表单内的表单标签后放置纯文本时，请在 <p> 上使用 class .form-control-static

禁用 表单：

<input type="text" class="form-control"  disabled>

禁用全部表单：form 标签下<fieldset disabled>

只读 readonly

帮助文本：.help-block

颜色：.has-success  .has-error  .has-warning 添加到父元素

大小：.input-lg .input-sm  加.form-group-lg .form-group-sm  或者用栅格

  has-feedback

form-control-feedback