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控件不太一样