基礎表單 水平表單 內聯表單

一、基礎表單
類名“form-control”，實現一些設計上的定製效果。

1、寬度變成了100%

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

3、具有4px的圓角

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

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

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

 二、水平表單

Bootstrap框架預設的表單是“垂直顯示風格”，但很多時候我們需要的“水平表單風格”（標籤居左，表單控制元件居右）見下圖。

在Bootstrap框架中要實現水平表單效果，必須滿足以下兩個條件：
1、在<form>元素是使用類名“form-horizontal”。
2、配合Bootstrap框架的網格系統。（網格佈局會在以後的章節中詳細講解）

在<form>元素上使用類名“form-horizontal”主要有以下幾個作用：
1、設定表單控制元件padding和margin值。
2、改變“form-group”的表現形式，類似於網格系統的“row”。

<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">郵箱</label>
<div class="col-sm-10">
<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-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="請輸入您的郵箱密碼">
</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>

三、內聯表格

有時候我們需要將表單的控制元件都在一行內顯示，在Bootstrap框架中實現這樣的表單效果是輕而易舉的，你只需要在<form>元素中新增類名“form-inline”即可。

<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>
<div class="checkbox">
<label>
<input type="checkbox"> 記住密碼
</label>
</div>
<button type="submit" class="btn btn-default">進入郵箱</button>
</form> 

回過頭來看示例，你或許會問，為什麼添加了label標籤，而且沒有放置在”form-group”這樣的容器中，input也不會換行；還有label標籤怎麼沒顯示出來。如果你仔細看，在label標籤運用了一個類名“sr-only”，標籤沒顯示就是這個樣式將標籤隱藏了。

那麼Bootstrap為什麼要這麼做呢？這樣不是多此一舉嗎？其實不是的，如果沒有為輸入控制元件設定label標籤，“螢幕閱讀器”將無法正確識別。