• 垂直表單（默認(rèn)）
• 內(nèi)聯(lián)表單
• 水平表單

垂直表單

也稱基本表單
基本的表單結(jié)構(gòu)是 bootstrap 自帶的
創(chuàng)建基本表單的步驟：

• 向父 <form> 元素添加 role="form"。
• 把標(biāo)簽和控件放在一個(gè)帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。
• 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。

 <form role="form">
    <div class="form-group">
        <label for="name">名稱</label>
         <input type="text" class="form-control" id="name" placeholder="請(qǐng)輸入名稱">
    </div>
    <div class="form-group">
        <label for="tel">電話</label>
         <input type="text" class="form-control" id="tel" placeholder="請(qǐng)輸入電話">
    </div>
    <div class="form-group">
        <label for="inputfile">文件輸入</label>
         <input type="file" id="inputfile">
         <p class="help-block">這里是塊級(jí)幫助文本的實(shí)例。</p>
    </div>
    <div class="checkbox">
      <label>
         <input type="checkbox">請(qǐng)打勾
      </label>
      </div>
      <button type="submit" class="btn btn-default">提交</button>
</form>

效果：

Paste_Image.png

使用class .help-block來(lái)顯示表單提示信息

內(nèi)聯(lián)表單

內(nèi)聯(lián)表單即所有元素是內(nèi)聯(lián)的，向左對(duì)齊的，并排體現(xiàn)
在 <form> 標(biāo)簽添加 class .form-inline

<form class="form-inline" role="form">
  <div class="form-group">
    <label for="name">名稱</label>
    <input type="text" class="form-control" id="name" placeholder="請(qǐng)輸入名稱">
  </div>
  <div class="form-group">
   <label for="tel">電話</label>
   <input type="text" class="form-control" id="tel" placeholder="請(qǐng)輸入電話">
  </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">請(qǐng)打勾
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

效果：

Paste_Image.png

水平表單

水平表單風(fēng)格（標(biāo)簽居左，表單控件居右）
創(chuàng)建步驟：

• 在 <form> 標(biāo)簽添加 class .form-horizontal
• 把標(biāo)簽和控件放在一個(gè)帶有 class .form-group 的 <div> 中。
• 向標(biāo)簽添加 class .control-label。

<form class="form-horizontal" role="form">
    <div class="form-group">
       <label for="name" class="col-sm-2 control-label">昵稱 </label>
           <div class="col-sm-10">
              <input type="text" class="form-control" id="name" placeholder="請(qǐng)輸入昵稱">
           </div>
    </div>
    <div class="form-group">
       <label for="inputPassword" class="col-sm-2 control-label">密碼</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword" placeholder="請(qǐng)輸入密碼">
           </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>

效果：

Paste_Image.png

代碼中用到網(wǎng)格標(biāo)示col-sm-2
bootstrap 包含了一個(gè)響應(yīng)式的、移動(dòng)設(shè)備優(yōu)先的、不固定的網(wǎng)格系統(tǒng)，可以隨著設(shè)備或視口大小的增加而適當(dāng)?shù)財(cái)U(kuò)展到 12 列。
bootstrap網(wǎng)格的基本結(jié)構(gòu)

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
</div>