Bootstrap系列 -- 19. 焦点状态
2015-06-25 08:18
756 查看
表单主要用来与用户沟通,好的表单就能更好的与用户进行沟通,而好的表单一定离不开表单的控件状态。
表单状态的作用:
每一种状态都能给用户传递不同的信息,比如表单有焦点的状态可以告诉用户可以输入或选择东西,禁用状态可以告诉用户不可以输入或选择东西,还有就是表单控件验证状态,可以告诉用户的操作是否正确等。那么在Bootstrap框架中的表单控件也具备这些状态。
焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式,重新添加阴影效果
要让控件在焦点状态下有上面样式效果,需要给控件添加类名“form-control”
鼠标单击输入框,使其获得焦点就可以看到加入蓝色边框效果
在Bootstrap框架中,file、radio和checkbox控件在焦点状态下的效果也与普通的input控件不太一样
表单状态的作用:
每一种状态都能给用户传递不同的信息,比如表单有焦点的状态可以告诉用户可以输入或选择东西,禁用状态可以告诉用户不可以输入或选择东西,还有就是表单控件验证状态,可以告诉用户的操作是否正确等。那么在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控件不太一样
相关文章推荐
- Bootstrap系列 -- 18. 表单控件大小
- Bootstrap-Datatable学习笔记整理第1节
- Bootstrap系列 -- 17. 复选框checkbox和单选择按钮radio
- Bootstrap系列 -- 16. 文本域textarea
- bootstrap小技巧
- Bootstrap系列 -- 15. 下拉选择框select
- Bootstrap系列 -- 14. 表单控件输入框input
- Bootstrap系列 -- 13. 内联表单
- Bootstrap系列 -- 12. 水平表单
- Bootstrap系列 -- 11. 基础表单
- piwik学习2(bootstrap.php)
- Bootstrap 分页插件 ajax获取数据显示
- 三石推荐!把 Bootstrap 小清新带回家!
- Bootstrap3多级导航菜单
- 使用bootstrap时遇到的问题及解决办法
- Bootstrap系列 -- 10. 网格布局
- bootstrap
- Bootstrap 禁用滚动条
- bootstrap适配IE7,8
- dede分页样式修改(支持bootstrap分页样式)