在制作表单时，不免要做表单验证。同样也需要提供验证状态样式，在Bootstrap框架中同样提供这几种效果。
1、.has-warning:警告状态（黄色）
2、.has-error：错误状态（红色）
3、.has-success：成功状态（绿色）
使用的时候只需要在form-group容器上对应添加状态类名。
很多时候，在表单验证的时候，不同的状态会提供不同的 icon，比如成功是一个对号（√），错误是一个叉号（×）等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来，只需要在对应的状态下添加类名“has-feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起：
代码实例:
<!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>
<h3>示例2</h3>
<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=”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=”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>
</body>
</html>
平常在制作表单验证时，要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个”help-block”样式，将提示信息以块状显示，并且显示在控件底部。
在Bootstrap V2.x版本中还提供了一个行内提示信息，其使用了类名“help-inline”。一般让提示信息显示在控件的后面，也就是同一水平显示。如果你想在BootstrapV3.x版本也有这样的效果，你可以添加这段代码：
.help-inline{
display:inline-block;
padding-left:5px;
color: #737373;
}
如果你不想为bootstrap.css增加自己的代码，而且设计又有这种样的需求，那么只能借助于Bootstrap的网格系统。(网格系统在后面的章节中会详细讲解)
<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=”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=” help-block”>你输入的信息是错误的</span>
<span class=”glyphicon glyphicon-remove form-control-feedback”></span>
</div>
</form>