詳解Bootstrap創(chuàng)建表單的三種格式（一）

更新時(shí)間：2016年01月04日 10:22:07 投稿：mrr

在本章中，我們將學(xué)習(xí)如何使用 Bootstrap 創(chuàng)建表單。Bootstrap 通過一些簡(jiǎn)單的 HTML 標(biāo)簽和擴(kuò)展的類即可創(chuàng)建出不同樣式的表單，對(duì)bootstrap 表單相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧

在本章中，我們將學(xué)習(xí)如何使用 Bootstrap 創(chuàng)建表單。Bootstrap 通過一些簡(jiǎn)單的 HTML 標(biāo)簽和擴(kuò)展的類即可創(chuàng)建出不同樣式的表單。

Bootstrap表單類型分為三種格式：垂直或基本表單、內(nèi)聯(lián)表單、水平表單。

垂直或基本表單(display:block;)

基本的表單結(jié)構(gòu)是 Bootstrap 自帶的，個(gè)別的表單控件自動(dòng)接收一些全局樣式。下面列出了創(chuàng)建基本表單的步驟：

向父 <form> 元素添加 role="form"。

把標(biāo)簽和控件放在一個(gè)帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。

向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。

<!doctype html> 
<html lang="en"> 
 <head> 
  <!--網(wǎng)站編碼格式，UTF-8 國(guó)際編碼，GBK或 gb2312 中文編碼--> 
  <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="Keywords" content="關(guān)鍵詞一，關(guān)鍵詞二"> 
  <meta name="Description" content="網(wǎng)站描述內(nèi)容"> 
  <meta name="Author" content="Yvette Lau"> 
  <meta name = "viewport" content = " width = device-width, initial-scale = 1 ">   
  <title>BootstrapDemo</title> 
  <!--css js 文件的引入--> 
  <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"> 
 </head> 
 <body style="padding: 20px;"> 
  <div class = "col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
   <form role = "form"> 
    <div class = "form-group"> 
     <label for = "name">姓名</label> 
     <input type = "text" class = "form-control" id = "name" 
       placeholder = "請(qǐng)輸入姓名"></input> 
    </div> 
    <div class = "form-group"> 
     <label for = "tel">電話號(hào)碼</label> 
     <input type="text" class="form-control" id = "tel" 
       placeholder = "請(qǐng)輸入您的電話號(hào)碼"></input> 
    </div> 
    <div class = "form-group"> 
     <label for = "idCard">請(qǐng)上傳身份證</label> 
     <input type = "file" id = "idCard"></input> 
    </div> 
    <div class = "form-group"> 
     <label for = "profession">選擇職業(yè)</label> 
     <select id = "profession" class = "form-control"> 
      <option>軟件工程師</option> 
      <option>測(cè)試工程師</option> 
      <option>硬件工程師</option> 
      <option>質(zhì)量分析師</option> 
     </select> 
    </div> 
    <div class="form-group"> 
     <button type = "submit" class="btn-info btn-lg">提交</button> 
    </div> 
   </form> 
  </div> 
 </body> 
</html>

效果如下：

如果我們將select的form-control去掉，并給input type = "file"加上form-control，看看效果如何。

是不是能看出和上面效果的區(qū)別了呢？這樣您大概明白form-control的作用了，它是設(shè)置外圍的邊框效果，包括寬、高、獲取
焦點(diǎn)時(shí)form的樣式。

內(nèi)聯(lián)表單（全部在同一行，display為inline-block）

如果需要?jiǎng)?chuàng)建一個(gè)表單，它的所有元素是內(nèi)聯(lián)的，向左對(duì)齊的，標(biāo)簽是并排的，請(qǐng)向 <form> 標(biāo)簽添加 class .form-inline。

因?yàn)閔ead部分的內(nèi)容都是一樣的，所以我們只列出body部分的內(nèi)容。

<body style="padding: 20px;"> 
 <form role = "form" class="form-inline"> 
  <div class = "form-group"> 
   <label for = "name">姓名</label> 
   <input type = "text" class = "form-control" id = "name" placeholder = "請(qǐng)輸入姓名"></input> 
  </div> 
  <div class = "form-group"> 
   <label for = "tel">電話號(hào)碼</label> 
   <input type="text" class="form-control" id = "tel" placeholder = "請(qǐng)輸入您的電話號(hào)碼"></input> 
  </div> 
  <div class = "form-group"> 
   <label for = "idCard">請(qǐng)上傳身份證</label> 
   <input type = "file" id = "idCard"></input> 
  </div> 
  <div class = "form-group"> 
   <label for = "profession">選擇職業(yè)</label> 
   <select id = "profession" class = "form-control"> 
    <option>軟件工程師</option> 
    <option>測(cè)試工程師</option> 
    <option>硬件工程師</option> 
    <option>質(zhì)量分析師</option> 
   </select> 
  </div> 
  <div class="form-group"> 
   <button type = "submit" class="btn-info btn-lg">提交</button> 
  </div> 
 </form>   
</body>

顯示效果：

默認(rèn)情況下，Bootstrap 中的 input、select 和 textarea 有 100% 寬度。在使用水平表單時(shí)，您需要在表單控件上設(shè)置一個(gè)寬度。

使用 class .sr-only，可以隱藏內(nèi)聯(lián)表單的標(biāo)簽。

注：sr-only是展示給屏幕閱讀器，而非是普通的讀者看的。

其它元素在form的class為form-inline時(shí)，display為inLine-block;但是input tyoe = "file"卻仍是display:block，可以看出其布局是有問題的，此時(shí)可以單獨(dú)設(shè)置其display為inline-block;

水平表單(label和input等表單元素在同一行)

水平表單與其他表單不僅標(biāo)記的數(shù)量上不同，而且表單的呈現(xiàn)形式也不同。如需創(chuàng)建一個(gè)水平布局的表單，請(qǐng)按下面的幾個(gè)步驟進(jìn)行：

     1、向父 <form> 元素添加 class .form-horizontal。
     2、把標(biāo)簽和控件放在一個(gè)帶有 class .form-group 的 <div> 中。
     3、向標(biāo)簽添加 class .control-label。
     4、設(shè)置label和其兄弟div的寬度（因?yàn)閕nput等默認(rèn)寬度是100%）。

<body style="padding: 20px;"> 
 <form role = "form" class="form-horizontal"> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "name">姓名</label> 
   <div class="col-sm-2"> 
    <input type = "text" class = "form-control" id = "name" 
     placeholder = "請(qǐng)輸入姓名"></input> 
   </div> 
  </div> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "tel">電話號(hào)碼</label> 
   <div class="col-sm-2"> 
    <input type="text" class="form-control" id = "tel" 
      placeholder = "請(qǐng)輸入您的電話號(hào)碼"></input> 
   </div> 
  </div> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "idCard">請(qǐng)上傳身份證</label> 
   <div class="col-sm-2"> 
    <input type = "file" id = "idCard" style="display:inline-block;"></input> 
   </div> 
  </div> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "profession">選擇職業(yè)</label> 
   <div class="col-sm-2"> 
    <select id = "profession" class = "form-control"> 
     <option>軟件工程師</option> 
     <option>測(cè)試工程師</option> 
     <option>硬件工程師</option> 
     <option>質(zhì)量分析師</option> 
    </select> 
   </div> 
  </div> 
  <div class="form-group"> 
   <div class="col-sm-2 col-sm-offset-2"> 
    <button type = "submit" class="btn-info btn-lg">提交</button> 
   </div>    
  </div> 
 </form> 
</body>

效果：