3-14 表单提示信息
本节编程练习不计算学习进度，请电脑登录imooc.com操作

表单提示信息

平常在制作表单验证时，要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式，将提示信息以块状显示，并且显示在控件底部。

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

运行效果如下或查看右侧结果窗口：

具体样式代码请查看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的网格系统。(网格系统在后面的章节中会详细讲解)

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

运行效果如下或查看右侧结果窗口：

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

任务

我来试试：完成下面任务

在代码编辑器的第26行补充代码，为25行的输入框提示“你输入的信息是错误的”的信息。

index.htmlstyle.css 
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5. 	<title>表单提示信息</title>
  6. 	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <h3>示例1</h3>
  10. <form role="form">
  11.   <div class="form-group has-success has-feedback">
  12.     <label class="control-label" for="inputSuccess1">成功状态</label>
  13.     <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
  14.     <span class="help-block">你输入的信息是正确的</span>
  15.     <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  16.   </div>
  17.   <div class="form-group has-warning has-feedback">
  18.     <label class="control-label" for="inputWarning1">警告状态</label>
  19.     <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
  20.     <span class="help-block">请输入正确信息</span>
  21.     <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  22.   </div>
  23.   <div class="form-group has-error has-feedback">
  24.     <label class="control-label" for="inputError1">错误状态</label>
  25.     <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
  26.  
  27.     <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
  28.   </div>
  29. </form>    
  30. <br>
  31. <br>
  32. <br>
  33. <h3>示例2</h3>
  34. <form role="form">
  35.   <div class="form-group">
  36.     <label class="control-label" for="inputSuccess1">成功状态</label>
  37.     <div class="row">
  38.       <div class="col-xs-6">
  39.         <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
  40.       </div>
  41.        <span class="col-xs-6 help-block">你输入的信息是正确的</span>
  42.     </div>
  43.   </div> 
  44. </form> 
  45. </body>
  46. </html>
  1. body{
  2.   padding:100px;
  3. }
下一节