表單主要用來與用戶溝通，好的表單就能更好的與用戶進(jìn)行溝通，而好的表單一定離不開表單的控件狀態(tài)。

表單狀態(tài)的作用：

每一種狀態(tài)都能給用戶傳遞不同的信息，比如表單有焦點的狀態(tài)可以告訴用戶可以輸入或選擇東西，禁用狀態(tài)可以告訴用戶不可以輸入或選擇東西，還有就是表單控件驗證狀態(tài)，可以告訴用戶的操作是否正確等。那么在Bootstrap框架中的表單控件也具備這些狀態(tài)。

焦點狀態(tài)是通過偽類“:focus”來實現(xiàn)。Bootstrap框架中表單控件的焦點狀態(tài)刪除了outline的默認(rèn)樣式，重新添加陰影效果。

源碼請查閱bootstrap.css文件第1707行～第1712行：

.form-control:focus {
border-color: #66afe9;
outline: 0;
  -webkit-box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

 從源碼中我們可以看出，要讓控件在焦點狀態(tài)下有上面樣式效果，需要給控件添加類名“form-control”：

<form role="form" class="form-horizontal">
  <div class="form-group">
    <div class="col-xs-6">
      <input class="form-control input-lg" type="text" placeholder="不是焦點狀態(tài)下效果">
    </div>
    <div class="col-xs-6">
      <input class="form-control input-lg" type="text" placeholder="焦點點狀態(tài)下效果">
    </div>
  </div>
</form>

運行效果如下或查看右側(cè)結(jié)果窗口：

（鼠標(biāo)單擊輸入框，使其獲得焦點就可以看到加入藍(lán)色邊框效果）

在Bootstrap框架中，file、radio和checkbox控件在焦點狀態(tài)下的效果也與普通的input控件不太一樣，主要是因為Bootstrap對他們做了一些特殊處理：
/*源碼查看boostrap.css文件第1676行～第1682行*/

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}