基礎表單

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

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

1、寬度變成了100%

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

3、具有4px的圓角

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

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

注意：類名“.form-control

”是新增在 input、select上面的。只控制輸入框的樣式。

注意：當 input 的型別是 checkbox 或者 radio 時，<label> 是包裹住了 <input> 的>。

水平表單

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-10">
  <input type="email" class="form-control" id="inputEmail3" placeholder="請輸入您的郵箱地址">
  </div>
</div>

從上面可以看出水平表單的使用方法：

1. 為 form 增添 .form-horizontal 類。

2. 用一個 div.form-group 包裹 label 和 input

3. 為 label 增添 .col-sm-2 .control-label

4. 用一個 .col-sm-10 的div 包裹 input

5. 為 input 增添 form-control 類

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

內聯表單

有時候我們需要將表單的控制元件都在一行內顯示，類似這樣的：

只需要在<form>元素中新增類名“form-inline”即可。

如果你要在input前面新增一個label標籤時，會導致input換行顯示。如果你必須新增這樣的一個label標籤，並且不想讓input換行，你需要將label標籤也放在div容器“form-group”中，如：

<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>

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

注意：那麼Bootstrap為什麼要這麼做呢？這樣不是多此一舉嗎？其實不是的，如果沒有為輸入控制元件設定label標籤，螢幕閱讀器將無法正確識別。這也是Bootstrap框架另一個優點之處，為殘障人員進行了一定的考慮。

除了checkbox和radio，每一個表單控制元件都用一個 div.form-group 包裹？

另外，對於內聯的 input checkbox radio 一個div.form-group 就包裹了所有要內聯的表單控制元件？

表單控制元件（輸入框input）

單行輸入框，常見的文字輸入框，也就是input的type屬性值為text。在Bootstrap中使用input時也必須新增type型別，如果沒有指定type型別，將無法得到正確的樣式，因為Bootstrap框架都是通過input[type=“?”](其中?號代表type型別，比如說text型別，對應的是input[type=“text”])的形式來定義樣式的。

表單控制元件（下拉選擇select）

Bootstrap框架中的下拉選擇框使用和原始的一致，多行選擇設定multiple屬性的值為multiple。

表單控制元件（文字域textarea）

文字域和原始使用方法一樣，設定rows可定義其高度，設定cols可以設定其寬度。但如果textarea元素中添加了類名“form-control”類名，則無需設定cols屬性。因為Bootstrap框架中的“form-control”樣式的表單控制元件寬度為100%或auto。所以為 input 增添 .form-control 後框的寬度到瀏覽器邊緣了。可以通過增添 .col-sm-數字 來縮短寬度？ 

表單控制元件（複選框checkbox和單選擇按鈕radio）

Bootstrap框架中checkbox和radio有點特殊，Bootstrap針對他們做了一些特殊化處理，主要是checkbox和radio與label標籤配合使用會出現一些小問題（最頭痛的是對齊問題）。比如下面這樣：

 

因此要採取下面的方法：

1、不管是 checkbox 還是 radio 都使用label包起來了 2、checkbox 連同 label 標籤放置在一個名為“.checkbox”的div容器內  (2) radio連同label標籤放置在一個名為“.radio”的div容器內 在Bootstrap框架中，主要藉助“.checkbox”和“.radio”樣式，來處理複選框、單選按鈕與標籤的對齊方式。

<div class="checkbox">
<label>
<input type="checkbox" value="">
記住密碼
</label>
</div>

<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
不喜歡
</label>
</div>

這樣就變成了：

從上面可以看出，對於 checkbox 和 radio 可以這樣做：

1. 用一個 div.checkbox 包裹 label 和 input[type="checkbox"] 或者用一個 .radio 包裹 label 和 input[type="radio"]。

2. 讓 label 包裹住 input[type="checkbox"]  或者 input[type="radio"]。

表單控制元件（複選框和單選框按鈕水平排列）

有時候，為了佈局的需要，將複選框和單選按鈕需要水平排列。Bootstrap框架也做了這方面的考慮：1、如果checkbox需要水平排列，只需要在label標籤上新增類名“checkbox-inline” 2、如果radio需要水平排列，只需要在label標籤上新增類名“radio-inline”

<div class="form-group">
    <label class="checkbox-inline">
      <input type="checkbox"  value="option1">遊戲
    </label>
    <label class="checkbox-inline">
      <input type="checkbox"  value="option2">攝影
    </label>
    <label class="checkbox-inline">
    <input type="checkbox"  value="option3">旅遊
    </label>
  </div>

上面程式碼的顯示是：

注意：同樣需要用div把label和input包裹起來，但是這時候div的class不像上面那樣是"checkbox"或者“radio”，而是“form-group”了。

<div class="form-group">
    <label>
      <input type="checkbox"  value="option1">遊戲
    </label>
    <label>
      <input type="checkbox"  value="option2">攝影
    </label>
    <label>
    <input type="checkbox"  value="option3">旅遊
    </label>
  </div>

上面程式碼的顯示是：

注意區分不同！後者的 input 沒有 .checkbox-inline

表單控制元件（按鈕）

按鈕也是表單重要控制元件之一,製作按鈕通常使用下面程式碼來實現：

☑  input[type=“submit”]

☑  input[type=“button”]

☑  input[type=“reset”]

☑  <button>

在Bootstrap框架中的按鈕都是採用<button>來實現，注意button中也要有 type = "button"。

注意：從上面可以看出 ".btn"都是必須的

表單控制元件大小：

前面看到的表單控制元件都正常的大小。可以通過設定控制元件的height，line-height，padding和font-size等屬性來實現控制元件的高度設定。不過Bootstrap框架還提供了兩個不同的類名，用來控制表單控制元件的高度。這兩個類名是：1、input-sm:讓控制元件比正常大小更小 2、input-lg:讓控制元件比正常大小更大

這兩個類適用於表單中的input，textarea和select控制元件。

<input class="form-control input-lg" type="text" placeholder="新增.input-lg，控制元件變大">

然而，不管是“input-sm”還是“input-lg”僅對控制元件高度做了處理。但往往很多時候，我們需要控制元件寬度也要做一定的變化處理。這個時候就要借住Bootstrap框架的網格系統。

 <div class="col-xs-4">
    <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
  </div>

表單控制元件狀態（焦點狀態）

表單狀態的作用：

每一種狀態都能給使用者傳遞不同的資訊，比如表單有焦點的狀態可以告訴使用者可以輸入或選擇東西，禁用狀態可以告訴使用者不可以輸入或選擇東西，還有就是表單控制元件驗證狀態，可以告訴使用者的操作是否正確等。那麼在Bootstrap框架中的表單控制元件也具備這些狀態。

要讓控制元件在焦點狀態下有上面樣式效果，需要給控制元件新增類名“form-control”

在Bootstrap框架中，file、radio和checkbox控制元件在焦點狀態下的效果也與普通的input控制元件不太一樣，主要是因為Bootstrap對他們做了一些特殊處理：

表單控制元件狀態（禁用狀態）

Bootstrap框架的表單控制元件的禁用狀態和普通的表單禁用狀態實現方法是一樣的，在相應的表單控制元件上新增屬性“disabled”。

注意：要讓radio和checkbox預設被選中，是新增屬性"checked"

但是對於整個禁用的域中（即在fieldset中設定了disabled），如果legend中有輸入框的話，這個輸入框是無法被禁用的

<form role="form">
<fieldset disabled>
<legend><input type="text" class="form-control" placeholder="顯然我顏色變灰了，但是我沒被禁用，不信？單擊試一下" /></legend>
    …
</fieldset>
</form>

表單控制元件狀態（驗證狀態）

在製作表單時，不免要做表單驗證。同樣也需要提供驗證狀態樣式，在Bootstrap框架中同樣提供這幾種效果。 1、.has-warning:警告狀態（黃色） 2、.has-error：錯誤狀態（紅色） 3、.has-success：成功狀態（綠色） 注意：這個是在form-group容器上對應新增狀態類名的。<label>上加入class="control-label"，同時也會把裡面的label字型顏色改變。

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">成功狀態</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" >
</div>

注意：<label> 沒有包裹住 <input>

很多時候，在表單驗證的時候，不同的狀態會提供不同的 icon，比如成功是一個對號（√），錯誤是一個叉號（×）等。在Bootstrap框中也提供了這樣的效果。如果你想讓表單在對應的狀態下顯示 icon 出來，只需要在對應的狀態下新增類名“has-feedback”。請注意，此類名要與“has-error”、“has-warning”和“has-success”在一起：

<div class="form-group has-successhas-feedback">
  <label class="control-label" for="inputSuccess1">成功狀態</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" >
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>

注意：一定要在表單中新增最後的那個<span>，這個 span 有 3 個類。

表單提示資訊

在Bootstrap框架中使用了一個"help-block"樣式，將提示資訊以塊狀顯示，並且顯示在控制元件底部。

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess1">成功狀態</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" >
  <span class="help-block">你輸入的資訊是正確的</span>
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

如果想讓提示資訊顯示在控制元件的後面，也就是同一水平顯示，可以藉助於Bootstrap的網格系統：

<form role="form">
<div class="form-group">
<label class="control-label" for="inputSuccess1">成功狀態</label>
<div class="row"><div class="col-xs-6">
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" >
</div>
<span class="col-xs-6 help-block">你輸入的資訊是正確的</span>
</div>
</div>
</form>

預設按鈕

Bootstrap框架首先通過基礎類名“.btn”定義了一個基礎的按鈕風格，然後通過“.btn-default”定義了一個預設的按鈕風格。預設按鈕的風格就是在基礎按鈕的風格的基礎上修改了按鈕的背景顏色、邊框顏色和文字顏色。

注意：要同時有.btn 和.btn-default 類

左邊是 .btn，右邊是 .btn .btn-default

按鈕多標籤支援

一般製作按鈕除了使用<button>標籤元素之外，還可以使用<input type="submit">和<a>標籤等。同樣，在Bootstrap框架中製作按鈕時，除了剛才所說的這些標籤元素之外，還可以使用在其他的標籤元素上，唯一需要注意的是，要在製作按鈕的標籤元素上新增類名“btn”。如果不新增是不會有任何按鈕效果。

注意：.btn-default也需要加上，不然沒邊框？

<button class="btn btn-default" type="button">button標籤按鈕</button>
<input type="submit" class="btnbtn-default" value="input標籤按鈕"/>
<a href="##" class="btn btn-default">a標籤按鈕</a>
<span class="btn btn-default">span標籤按鈕</span>
<div class="btn btn-default">div標籤按鈕</div>

注意：雖然在Bootstrap框架中使用任何標籤元素都可以實現按鈕風格，但個人並不建議這樣使用，為了避免瀏覽器相容性問題，個人強烈建議使用button或a標籤來製作按鈕。

定製風格

在Bootstrap框架中不同的按鈕風格都是通過不同的類名來實現，在使用過程中，開發者只需要選擇不同的類名即可：

使用起來就很簡單，就像前面介紹的預設按鈕一樣的使用方法，只需要在基礎按鈕“.btn”基礎上追加對應的類名，就可以得到需要的按鈕風格。

按鈕大小

在Bootstrap框架中，對於按鈕的大小，也是可以定製的。類似於input一樣，通過在基礎按鈕“.btn”的基礎上追加類名來控制按鈕的大小： .btn-lg  .btn-sm .btn-xs

塊狀按鈕

Bootstrap框架中提供了一個類名“btn-block”。按鈕使用這個類名就可以讓按鈕充滿整個容器，並且這個按鈕不會有任何的padding和margin值。

禁用按鈕

和input等表單控制元件一樣，在Bootstrap框架的按鈕中也具有禁用狀態的設定。禁用狀態與其他狀態按鈕相比，就是背景顏色的透明度做了一定的處理，opcity的值從100%調整為65%。

在Bootstrap框架中，要禁用按鈕有兩種實現方式：

方法1：在標籤中新增disabled屬性

方法2：在元素標籤中新增類名“disabled”

兩者的主要區別是：

“.disabled”樣式不會禁止按鈕的預設行為，比如說提交和重置行為等。如果想要讓這樣的禁用按鈕也能禁止按鈕的預設行為，則需要通過JavaScript這樣的語言來處理。對於<a>標籤也存在類似問題，如果通過類名“.disable”來禁用按鈕，其連結行為是無法禁止。而在元素標籤中新增“disabled”屬性的方法是可以禁止元素的預設行為的。

影象

影象在網頁製作中也是常要用到的元素，在Bootstrap框架中對於影象的樣式風格提供以下幾種風格：

1、img-responsive：響應式圖片，主要針對於響應式設計2、img-rounded：圓角圖片3、img-circle：圓形圖片4、img-thumbnail：縮圖片

使用方法：

使用方法非常簡單，只需要在<img>標籤上新增對應的類名，如下程式碼：

<img  alt="140x140" src="http://placehold.it/140x140">
<img  class="img-rounded" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-circle" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-responsive" alt="140x140" src="http://placehold.it/140x140">

圖示

<span class="glyphicon glyphicon-okform-control-feedback"></span>

使用方法：

1.不要和其他元件混合使用

圖示類不能和其它元件直接聯合使用。它們不能在同一個元素上與其他類共同存在。應該建立一個巢狀的 <span>標籤，並將圖示類應用到這個 <span> 標籤上。

2.只對內容為空的元素起作用

圖示類只能應用在不包含任何文字內容或子元素的元素上。

。。。。

注意：把 Bootstrap 資料夾中的 fonts 資料夾放到CSS同級，不然圖示不會顯示。