Bootstrap系列 -- 19. 焦點狀態

賀臣發表於2015-06-25
boot

 

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

 

　　表單狀態的作用：

　　每一種狀態都能給使用者傳遞不同的資訊，比如表單有焦點的狀態可以告訴使用者可以輸入或選擇東西，禁用狀態可以告訴使用者不可以輸入或選擇東西，還有就是表單控制元件驗證狀態，可以告訴使用者的操作是否正確等。那麼在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控制元件不太一樣

 

　　

相關文章