基本實例

單獨的表單控件會被自動賦予一些全局樣式。所有設置了 .form-control 類的 <input>、<textarea> 和 <select> 元素都將被默認設置寬度屬性為 width: 100%;。 將 label 元素和前面提到的控件包裹在 .form-group 中可以獲得最好的排列。

 <form role="form">
    <div class="form-group">
       <label for="exampleInputEmail1">Email address</label>
       <input type="email" class="form-control" id="exampleInputEmail1" 
          placeholder="Enter email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1"
         placeholder="Password">
    </div>
    <div class="form-group">
         <label for="exampleInputFile">File input</label>
         <input type="file" id="exampleInputFile">
         <p class="help-block">Example block-level help text 
           here.</p>
    </div>
    <div class="checkbox">
         <label>
            <input type="checkbox"> Check me out
         </label>
   </div>
   <button type="submit" class="btn btn-default">Submit</button>
 </form>

效果圖如下：

表單組件.png

內聯表單

為 <form> 元素添加 .form-inline 類可使其內容左對齊并且表現為 inline-block 級別的控件。只適用于視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單折疊）。

需要手動設置寬度
在 Bootstrap 中，輸入框和單選/多選框控件默認被設置為 width: 100%; 寬度。在內聯表單，我們將這些元素的寬度設置為 width: auto;，因此，多個控件可以排列在同一行。根據你的布局需求，可能需要一些額外的定制化組件。

一定要添加 label 標簽
如果你沒有為每個輸入控件設置 label 標簽，屏幕閱讀器將無法正確識別。對于這些內聯表單，你可以通過為 label 設置 .sr-only 類將其隱藏。

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" 
    placeholder="Enter email">
  </div>
  <div class="form-group">
    <div class="input-group">
       <div class="input-group-addon">@</div>
       <input class="form-control" type="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" 
     placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
       <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

效果圖如下：

內聯表單.png

水平排列的表單

通過為表單添加 .form-horizontal 類，并聯合使用 Bootstrap 預置的柵格類，可以將 label 標簽和控件組水平并排布局。這樣做將改變 .form-group 的行為，使其表現為柵格系統中的行（row），因此就無需再額外添加 .row 了。

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3"  
         placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" 
       placeholder="Password">
    </div>
  </div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
         <label><input type="checkbox"> Remember me</label>
     </div>
 </div> </div> <div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
  <button type="submit" class="btn btn-default">Sign in</button>
</div></div></form>

效果圖如下：

水平排列的表單.png