全面解析Bootstrap表單使用方法（表單樣式）_javascript技巧

一、基本表單

 <form >
 <div class="form-group">
 <label>邮箱：</label>
 <input type="email" class="form-control" placeholder="请输入您的邮箱地址">
 </div>
 <div class="form-group">
 <label >密码</label>
 <input type="password" class="form-control" placeholder="请输入您的邮箱密码">
 </div>
 <div class="checkbox">
 <label>
 <input type="checkbox"> 记住密码
 </label>
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
 </form>

表單除了這幾個元素之外，還有input、select、textarea等元素，在Bootstrap框架中，透過客製化了一個類別名稱`form-control`，也就是說，如果這幾個元素使用了類別名稱“form-control”，將會實現一些設計上的客製化效果。

1、寬度變成了100%

2、設定了一個淺灰色（#ccc）的邊框

3、具有4px的圓角

4、設定陰影效果，且元素得到焦點之時，陰影和邊框效果會有所變化

5、設定了placeholder的顏色為#999

二、水平表單
Bootstrap框架預設的表單是垂直顯示風格，但很多時候我們需要的水平表單風格（標籤居左，表單控制項居右）。

<form class="form-horizontal" role="form">
 <div class="form-group">
 <label for="inputEmail3" class="col-sm-2 control-label">邮箱:</label>
 <div class="col-sm-4">
 <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
 </div>
 </div>
 <div class="form-group">
 <label for="inputPassword3" class="col-sm-2 control-label">密码:</label>
 <div class="col-sm-4">
 <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
 </div>
 </div>
 </form>

在Bootstrap框架中要達到水平表單效果，必須滿足以下兩個條件：
1.在

元素是使用類別名稱".form-horizo​​ntal」。
2、配合Bootstrap框架的網格系統。

在

元素上使用類別名稱".form-horizo​​ntal」主要有以下幾個作用：
1、設定表單控制項padding和margin值。
2.改變「form-group」的表現形式，類似網格系統的「row」。 

三、內嵌表單
有時候我們需要將表單的控制項都在一行內顯示

 <form class="form-inline" role="form">
 <div class="form-group">
 <label class="sr-only" for="exampleInputEmail2">邮箱</label>
 <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
 </div>
 <div class="form-group">
 <label class="sr-only" for="exampleInputPassword2">密码</label>
 <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
 </form>

在Bootstrap框架中實現這樣的表單效果是輕而易舉的，你只需要在

元素中加入類別名稱「.form-inline」。

如果你要在input前面加上label標籤時，會導致input換行顯示。如果你必須加入這樣的label標籤，並且不想讓input換行，你需要將label標籤也放在容器「form-group」中。

以上就是全面解析Bootstrap表單使用方法的第一篇，之後還有更多內容會不斷更新，希望大家繼續關注。