水平表单

<form class="form-horizontal">
    <div class="form-group">
        <!-- .control-label 用于样式-->
        <label for="name" class="col-md-4 control-label">姓名：</label>
        <!--input必须包裹在div中，否则将会在第二行显示-->
        <div class="col-md-5">
            <input type="text" size="50" class="form-control">
        </div>
    </div>
    <div class="form-group">
         <label for="add" class="col-md-4 control-label">地址：</label>
         <div class="col-md-5">
            <input type="text" size="50" class="form-control">
         </div>
     </div>
    <div class="form-group">
        <div class="col-md-offset-8 col-md-3">
            <button type="submit">提交</button>
        </div>
    </div>
</form>

垂直表单

与水平表单相比，垂直表单的输入框不需要包裹在div中。

<form role="form">
    <div class="form-group">
        <label for="name">姓名：</label>
        <input type="text" class="form-control" id="name">
    </div>
    <div class="form-group">
        <label for="add">地址：</label>
        <input type="text" class="form-control" id="add">
    </div>
    <div class="form-group">
        <label for="file">请选择文件：</label>
        <input type="file" class="form-control" id="file">
    </div>
</form>

内联表单

input不需要包裹在div中。

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="name">名称</label>
    <input type="text" class="form-control" id="name" placeholder="请输入名称">
  </div>
  <div class="form-group">
    <label class="sr-only" for="inputfile">文件输入</label>
    <input type="file" id="inputfile">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">请打勾
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>