章节
问答
课签
笔记
评论
占位
占位

表单提示信息

平常在制作表单验证时,要提供不同的提示信息。在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行的输入框提示“你输入的信息是错误的”的信息。

?不会了怎么办

参考代码如下:

<span class="help-block">你输入的信息是错误的</span>
||
1
2
<!doctype html>
<html lang="en"
    >
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
body{
padding:100px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / 爬动的瓜子
只是对内容的补充说明 想看效果的话可以自己在代码演示块输入看效果,只需要把help-block换成help-inline就可以

最新回答 / Caesar_yt
不要在input标签上面设置宽度,在form标签或者div标签上设置

最赞回答 / 慕桂英8234898
下边那句是图标,那个绿色OK的图标,你试试删掉这句运行就看出不一样了<...图片...><...图片...>

最新回答 / qq_L_bqyANO
上面打错了  是先是不显示出来  然后做正则判断即可

最赞回答 / qq_L_bqyANO
是因为外面套的大盒子 用的上节课内容的has-success has-warning has-error 来控制了整个盒子的文字颜色属性

最新回答 / 慕粉1747223018
bootstrap 标准是 form&>div&le lable input span span 自己还把标准格式复制运行,然后在浏览器开发都工具中看bootstap是怎么写样式的。如果不是前端工程师就不要纠结那么细。<...图片...>&belform role="f...

已采纳回答 / zengjd2
你说的应该是表单验证的问题。http://www.imooc.com/learn/44

已采纳回答 / 慕工程6945555
<!doctype html><html><head>    &metmeta charset="UTF-8"&       &le&title&示信息表单提示信息</title&l="    &et"link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha...

最新回答 / deny2015
我后面有个按钮菜单不弹出来,后来换IE好了,所以我怀疑是不是chome版本的问题导致的

最新回答 / qq_L_bqyANO
在span的父级盒子上加has-feedback , 因为图标的样式位置是根据这个类名来的 <div class="col-xs-6  has-feedback">        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >        <span class="glyphicon glyphicon-remove form-control-feedback"&...

已采纳回答 / 慕粉3937221
help-block是一个样式类名,在Bootstrap.css里面定义了对应的help-block样式声明,其中就设定了对应的颜色样式声明。这位同学可能还没有很好的理解样式类的用法,推荐学习一下CSS的相关知识。简单看下Bootstrap.css关于help-block代码:.has-success .help-block,.has-success .control-label,.has-success .radio,.has-success .checkbox,.has-success .radio-...

最新回答 / Ben_0010
我建议贴代码出来,较好,可能是代码写错了吧。

最新回答 / qq_风过留痕_14251121
给span加上margin-top:-25px;把图标提上去
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言