表單中常見元素主要是：文字輸入框、下拉選擇框、單選按鈕、複選按鈕、文字域和按鈕。

1、基礎表單（僅對錶單內的 fieldset、legend、label標籤進行定製）：

原始碼：

fieldset {min-width: 0;padding: 0;margin: 0;border: 0;}
legend {display: block;width: 100%;padding: 0;margin-bottom: 20px;font-size: 21px;line-height: inherit;
        color: #333;border: 0;border-bottom: 1px solid #e5e5e5;}
label {display: inline-block;margin-bottom: 5px;font-weight: bold;}
 

                   還對input、select、textarea通過使用類名“form-control”進行設定 （寬度變成了100%；設定了一個淺灰色的邊框；具有4px的圓角；設定了placeholder的顏色為#999；設定了陰影效果，而且在元素得到焦點之前，陰影和邊框效果會有所變化）。

用法：

<form role="form">
    <div class="form-group">
    <lable for="exampleInputEmail1">郵箱:</lable> 
    <input type="email" placeholder="請輸入您的郵箱地址" class=" form-control" id="exampleInputEmail1"  />
    </div>
    
    <div class="form-group">
    <lable for="exampleInputPassword1">密碼:</lable>
    <input type="password" placeholder="請輸入您的密碼" class="form-control" id="exampleInputPassword1"  />  
    </div>
    <div class="checkbox">
    <lable>
     <input type="checkbox">記住密碼
    </lable>
    </div>
    <button type="submit" class="btn btn-default">進入郵箱</button>
</form>
 

2、水平表單（bootstrap預設的表單為垂直顯示，使用類名".form-horizontal"使其水平顯示）

條件：在<form>元素使用類名"form-horizontal"；配合bootstrap框架的網格系統。

“form-horizontal”的作用：設定表單控制元件padding和margin值；改變“form-group”的表現形式，類似網格系統中的“row”。

原始碼：

.form-horizontal .control-label,
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {padding-top: 7px;margin-top: 0;margin-bottom: 0;}
.form-horizontal .radio,
.form-horizontal .checkbox {min-height: 27px;}
.form-horizontal .form-group {margin-right: -15px;margin-left: -15px;}
.form-horizontal .form-control-static {padding-top: 7px;}
@media (min-width: 768px) {
.form-horizontal .control-label {text-align: right;}
}
.form-horizontal .has-feedback .form-control-feedback {top: 0;right: 15px;}
 

<form class="form-horizontal" >
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">郵箱</label>
        <div class="col-sm-10">
        <input type="email" placeholder="請輸入你的密碼" id="inputEmail" class="form-control" />
        </div>
    </div>
</form>

3、內聯表單（讓表單控制元件在一行顯示，在form元素中新增類名“form-inline”）

 原始碼：將其設定成內聯塊元素即可；

 用法：

法一， 需要將換行顯示的內容放在<div class="form-group">中：

<form class="form-inline">
<div class="form-group">
<label for="email">郵箱</label>
</div>
<div class="form-group">
<input type="email"  id="emali" class="form-control" placeholder="enter email" />
</div>
</form>

法二，label不需要放置在<div class="form-group">中，但是需要設定類名“sr-only”，將標籤隱藏。

“sr-only”設定樣式原始碼：（將其隱藏是為了讓螢幕閱讀器進行閱讀）     

.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;}

<form class="form-inline">
<div class="form-group">
<label for="email" class="sr-only">郵箱</label>
<input type="email"  id="emali" class="form-control" placeholder="enter email" />
</div>
</form>