欢迎光临
我们一直在努力

Bootstrap教程:表单控件状态三种不同颜色验证+信息正确输入提示

上篇文章也说到了《表单控件状态三种不同颜色验证状态》,在我们制作表单验证时,肯定会遇到提供不同的提示信息。在Bootstrap框架中官方也提供了这样的效果。使用了一个”help-block”样式,将提示信息以块状显示,并且显示在控件底部。还有一种样式是“help-inline”我们只需要把“help-block”替换即可。

代码演示1:

<form role="form">
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess1">成功状态</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
  <span class="help-block">你输入的信息是正确的</span>
  <span class="glyphiconglyphicon-ok form-control-feedback"></span>
</div>
  …
</form>

效果图:

具体css样式在bootstrap.css文件第1922行~第1927行可以自行查看学习:

.help-block {
display: block;
margin-top: 5px;
margin-bottom: 10px;
color: #737373;
}

并且在Bootstrap V2.x版本中还提供了一个行内提示信息,其使用了类名“help-inline”。一般让提示信息显示在控件的后面,也就是同一水平显示。如果你想在BootstrapV3.x版本也有这样的效果,你可以添加这段代码:

.help-inline{
  display:inline-block;
  padding-left:5px;
  color: #737373;
}

如果你不想为bootstrap.css增加自己的代码,而且设计又有这种样的需求,那么只能借助于Bootstrap的网格系统。

代码演示2:

<form role="form">
<div class="form-group">
<label class="control-label" for="inputSuccess1">成功状态</label>
<div class="row">
<div class="col-xs-6">
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
</div>
<span class="col-xs-6 help-block">你输入的信息是正确的</span>
</div>
</div>
</form>

效果图:

代码小结:

<!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">
</head>
<style>
.as{
    width:60%;
    margin:0px auto;
}
</style>
<body>
<h3>示例1</h3>
<form class="as" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess1">成功状态</label>
    <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
    <span class="help-block">你输入的信息是正确的</span>
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
  <div class="form-group has-warning has-feedback">
    <label class="control-label" for="inputWarning1">警告状态</label>
    <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
    <span class="help-block">请输入正确信息</span>
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
  <div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError1">错误状态</label>
    <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
    
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
  </div>
</form>    
<br>
<br>
<br>
<h3>示例2</h3>
<form class="as" role="form">
    
    
  <div class="form-group">
    <label class="control-label" for="inputSuccess1">成功状态</label>
    <div class="row">
      <div class="col-xs-6">
        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
      </div>
       <span class="col-xs-6 help-block">你输入的信息是正确的</span>
    </div>
  </div> 
  
</form> 
</body>
</html>

 

有关于Bootstrap框架中表单的运用除了按钮部分,到此就算是介绍完了。如果你觉得这样的表单效果并不是你需要的,你完全可以通过forms.less或者_forms.scss文件进行定制,然后重新编译就可以得到你需要的表单效果。在接下来的一节中,我们Bootstrap框架中另一个核心内容——按钮

赞(0) 打赏
未经允许不得转载:新起点博客 » Bootstrap教程:表单控件状态三种不同颜色验证+信息正确输入提示

评论 抢沙发

评论前必须登录!