11. 基礎表單

• 類名form-control
  1、寬度變成了100%
  2、設定了一個淺灰色（#ccc）的邊框
  3、具有4px的圓角
  4、設定陰影效果，並且元素得到焦點之時，陰影和邊框效果會有所變化
  5、設定了placeholder的顏色為#999

• 類名 form-horizontal
  水平表單風格（標籤居左，表單控制元件居右）

• 類名form-inline
  將表單的控制元件都在一行內顯示

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

  (其中?號代表type型別，比如說text型別，對應的是input[type=“text”])的形式來定義樣式的。為了讓控制元件在各種表單風格中樣式不出錯，需要新增類名“form-control”

• 表單控制元件(下拉選擇框select)
  多行選擇設定multiple屬性的值為multiple<select multiple class="form-control">

• 表單控制元件(文字域textarea)
  文字域和原始使用方法一樣，設定rows可定義其高度，設定cols可以設定其寬度。但如果textarea元素中添加了類名“form-control”類名，則無需設定cols屬性。因為Bootstrap框架中的“form-control”樣式的表單控制元件寬度為100%或auto。

<form role="form">
  <div class="form-group">
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

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

• 表單控制元件(複選框和單選按鈕水平排列)
  1、如果checkbox需要水平排列，只需要在label標籤上新增類名“checkbox-inline”
  2、如果radio需要水平排列，只需要在label標籤上新增類名“radio-inline”

• 表單控制元件(按鈕)
  

• 表單控制元件大小
  1、input-sm:讓控制元件比正常大小更小
  2、input-lg:讓控制元件比正常大小更大
  這兩個類適用於表單中的input，textarea和select控制元件，具體使用如下：

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

• 表單控制元件狀態(焦點狀態)
  焦點狀態是通過偽類“:focus”來實現

• 表單控制元件狀態(禁用狀態)
  只需要在需要禁用的表單控制元件上加上“disabled”即可

<input class="form-control" type="text" placeholder="表單已禁用，不能輸入" disabled>

在Bootstrap框架中，如果fieldset設定了disabled屬性，整個域都將處於被禁用狀態。如果legend中有輸入框的話，這個輸入框是無法被禁用的。

• 表單控制元件狀態(驗證狀態)
  1、.has-warning:警告狀態（黃色）
  2、.has-error：錯誤狀態（紅色）
  3、.has-success：成功狀態（綠色）
  使用的時候只需要在form-group容器上對應新增狀態類名。
  很多時候，在表單驗證的時候，不同的狀態會提供不同的 icon，比如成功是一個對號（√），錯誤是一個叉號（×）等。在Bootstrap框中也提供了這樣的效果。如果你想讓表單在對應的狀態下顯示 icon 出來，只需要在對應的狀態下新增類名“has-feedback”。請注意，此類名要與“has-error”、“has-warning”和“has-success”在一起：

<form role="form">
  <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="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
  <div class="form-group has-warning has-feedback">
    <label class="control-label" for="inputWarning1">警告狀態</label>
    <input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態">
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
  <div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError1">錯誤狀態</label>
    <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
  </div>

   <div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError1">email地址</label>
    <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
  </div>

</form>

在 Bootstrap 的小圖示都是使用@font-face來製作（後面的內容中將會著重用一節內容來介紹）。而且必須在表單中添加了一個 span 元素

• 表單提示資訊
  平常在製作表單驗證時，要提供不同的提示資訊。在Bootstrap框架中也提供了這樣的效果。使用了一個help-block樣式，將提示資訊以塊狀顯示，並且顯示在控制元件底部。help-inline讓提示資訊顯示在控制元件的後面，也就是同一水平顯示

  12.按鈕

 <button class="btn" type="button">基礎按鈕.btn</button>  
   <button class="btn btn-default" type="button">預設按鈕.btn-default</button> 
   <button class="btn btn-primary" type="button">主要按鈕.btn-primary</button> 
   <button class="btn btn-success" type="button">成功按鈕.btn-success</button> 
   <button class="btn btn-info" type="button">資訊按鈕.btn-info</button> 
   <button class="btn btn-warning" type="button">警告按鈕.btn-warning</button> 
   <button class="btn btn-danger" type="button">危險按鈕.btn-danger</button> 
   <button class="btn btn-link" type="button">連結按鈕.btn-link</button> 

- 按鈕大小

• 塊狀按鈕
  Bootstrap框架中提供了一個類名“btn-block”。按鈕使用這個類名就可以讓按鈕充滿整個容器，並且這個按鈕不會有任何的padding和margin值。在實際當中，常把這種按鈕稱為塊狀按鈕。

• 按鈕狀態——禁用狀態
  方法1：在標籤中新增disabled屬性
  方法2：在元素標籤中新增類名“disabled”

<button class="btnbtn-primary btn-lgbtn-block" type="button" disabled="disabled">通過disabled屬性禁用按鈕</button>
<button class="btnbtn-primary btn-block disabled" type="button">通過新增類名disabled禁用按鈕</button>
<button class="btnbtn-primary btn-smbtn-block" type="button">未禁用的按鈕</button>