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框架中,fileradiocheckbox控件在焦点状态下的效果也与普通的input控件不太一样

 

  

目录
打赏
0
0
0
0
5
分享
相关文章
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)
1663 0
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)
VUE-element-admin菜单栏图标选中状态跟随文字颜色状态变化
VUE-element-admin菜单栏图标选中状态跟随文字颜色状态变化
1176 0
VUE-element-admin菜单栏图标选中状态跟随文字颜色状态变化
elementUI返回状态快速显示
elementUI返回状态快速显示
132 0
Bootstrap系列 -- 28. 下拉菜单状态
  下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)和焦点状态(:focus)。   下拉菜单项除了上面两种状态,还有当前状态(.active)和禁用状态(.disabled)。这两种状态使用方法只需要在对应的菜单项上添加对应的类名 下拉菜单 ...
688 0
Bootstrap系列 -- 20. 禁用状态
  Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled”   在使用了“form-control”的表单控件中,样式设置了禁用表单背景色为灰色,而且手型变成了不准输入的形状。
930 0
Bootstrap系列 -- 22. 按钮详解
    Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格,然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。
1146 0
Bootstrap系列 -- 22. 按钮
    Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格,然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。
793 0
Bootstrap系列 -- 8. 代码显示
一. Bootstrap中的代码块   代码块一般在博客中使用的较多,比较博客园中提供的贴代码. 在Bootstrap中提供了三种形式的代码显示   1. 使用来显示单行内联代码   2. 使用来显示多行块代码   3.
811 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等