欢迎光临
我们一直在努力

Bootstrap教程:两种表单控件状态(焦点状态)及表单状态的作用

表单状态的作用:

每一种状态都能给用户传递不同的信息,比如表单有焦点的状态可以告诉用户可以输入或选择东西,禁用状态可以告诉用户不可以输入或选择东西,还有就是表单控件验证状态,可以告诉用户的操作是否正确等。那么在Bootstrap框架中的表单控件也具备这些状态。Bootstrap表单主要用来与用户沟通,好的表单就能更好的与用户进行沟通,而好的表单一定离不开表单的控件状态。

焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式,重新添加阴影效果。

Bootstrap教程

 

.form-control:focus {
border-color: #66afe9;
outline: 0;
  -webkit-box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

从源码中我们可以看出,要让控件在焦点状态下有上面样式效果,需要给控件添加类名“form-control”:

<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>

 

在Bootstrap框架中,fileradiocheckbox控件在焦点状态下的效果也与普通的input控件不太一样,主要是因为Bootstrap对他们做了一些特殊处理:

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}

 

整体效果代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单控件状态——焦点状态-新起点博客</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>

<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>
    <br>
     <br>
      <br>
       <br>
    <div class="col-xs-6">
      <input class="form-control input-lg" type="text" placeholder="焦点点状态下效果">
    </div>
  </div> 
</form>        
</body>
</html>

 

效果图:

赞(0) 打赏
未经允许不得转载:新起点博客 » Bootstrap教程:两种表单控件状态(焦点状态)及表单状态的作用

评论 抢沙发

评论前必须登录!