詳解Bootstrap建立表單的三種格式（一）_javascript技巧-js教程-PHP中文網

詳解Bootstrap建立表單的三種格式（一）_javascript技巧

WBOY

發布： 2016-05-16 15:22:03

原創

1431 人瀏覽過

在本章中，我們將學習如何使用 Bootstrap 建立表單。 Bootstrap 透過一些簡單的 HTML 標籤和擴充的類別即可建立出不同樣式的表單。

Bootstrap表單類型分為三種格式：垂直或基本表單、內聯表單、水平表單。

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

基本的表單結構是 Bootstrap 內建的，個別的表單控制項會自動接收一些全域樣式。下面列出了建立基本表單的步驟：

為父

元素加入 role="form"。

把標籤和控制項放在一個有 class .form-group 的

中。這是獲取最佳間距所必需的。

為所有的文字元素、和 <select> 新增 class .form-control。 </select>

<!doctype html> 
<html lang="en"> 
 <head> 
  <!--网站编码格式，UTF-8 国际编码，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="关键词一，关键词二"> 
  <meta name="Description" content="网站描述内容"> 
  <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 = "请输入姓名"></input> 
    </div> 
    <div class = "form-group"> 
     <label for = "tel">电话号码</label> 
     <input type="text" class="form-control" id = "tel" 
       placeholder = "请输入您的电话号码"></input> 
    </div> 
    <div class = "form-group"> 
     <label for = "idCard">请上传身份证</label> 
     <input type = "file" id = "idCard"></input> 
    </div> 
    <div class = "form-group"> 
     <label for = "profession">选择职业</label> 
     <select id = "profession" class = "form-control"> 
      <option>软件工程师</option> 
      <option>测试工程师</option> 
      <option>硬件工程师</option> 
      <option>质量分析师</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，看看效果如何。

是不是能看出和上面效果的差別了呢？這樣您大概明白form-control的作用了，它是設定外圍的邊框效果，包括寬、高、取得
焦點時form的樣式。

內嵌表單（全部在同一行，display為inline-block）

如果需要建立表單，它的所有元素是內聯的，向左對齊的，標籤是並排的，請在標籤上新增 class .form-inline。

因為head部分的內容都是一樣的，所以我們只列出body部分的內容。

<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 = "请输入姓名"></input> 
  </div> 
  <div class = "form-group"> 
   <label for = "tel">电话号码</label> 
   <input type="text" class="form-control" id = "tel" placeholder = "请输入您的电话号码"></input> 
  </div> 
  <div class = "form-group"> 
   <label for = "idCard">请上传身份证</label> 
   <input type = "file" id = "idCard"></input> 
  </div> 
  <div class = "form-group"> 
   <label for = "profession">选择职业</label> 
   <select id = "profession" class = "form-control"> 
    <option>软件工程师</option> 
    <option>测试工程师</option> 
    <option>硬件工程师</option> 
    <option>质量分析师</option> 
   </select> 
  </div> 
  <div class="form-group"> 
   <button type = "submit" class="btn-info btn-lg">提交</button> 
  </div> 
 </form>   
</body>

登入後複製

顯示效果：

預設情況下，Bootstrap 中的 input、select 和 textarea 有 100% 寬度。在使用水平表單時，您需要在表單控制項上設定一個寬度。

使用 class .sr-only，可以隱藏內嵌表單的標籤。

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

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

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

水平表單與其他表單不僅標記的數量上不同，而且表單的呈現形式也不同。如需建立一個水平版面的表單，請依照下面的步驟進行：

1、為父元素新增 class .form-horizontal。
2、把標籤和控制項放在一個有 class .form-group 的

中。
3、為標籤新增 class .control-label。
4、設定label和其兄弟div的寬度（因為input等預設寬度是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 = "请输入姓名"></input> 
   </div> 
  </div> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "tel">电话号码</label> 
   <div class="col-sm-2"> 
    <input type="text" class="form-control" id = "tel" 
      placeholder = "请输入您的电话号码"></input> 
   </div> 
  </div> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "idCard">请上传身份证</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">选择职业</label> 
   <div class="col-sm-2"> 
    <select id = "profession" class = "form-control"> 
     <option>软件工程师</option> 
     <option>测试工程师</option> 
     <option>硬件工程师</option> 
     <option>质量分析师</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>

登入後複製

效果：

以上內容為大家介紹了Bootstrap建立表單的相關內容，希望大家喜歡。