Bootstrap系列 -- 19. 焦點狀態

 

　　表單主要用來與用戶溝通，好的表單就能更好的與用戶進行溝通，而好的表單一定離不開表單的控件狀態。

 

　　表單狀態的作用：

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

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

 

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

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

　　鼠標單擊輸入框，使其獲得焦點就可以看到加入藍色邊框效果

　　在Bootstrap框架中，file、radio和checkbox控件在焦點狀態下的效果也與普通的input控件不太一樣