使用Bootstrap标记表单中的错误
我已经开始使用Bootstrap来实现一个漂亮的页面设计，而不需要求助于GWT (后端是用java编写的)
对于我的登录屏幕，我复制了这个example。现在，我想标记一个错误，例如，用户名保留为空。所以我想知道Bootstrap框架中的步骤是什么。或者，如果有显示表单有错误的示例。
我不确定是用红色显示输入元素内部的错误消息，还是在输入元素下面显示错误消息，或者用弹出窗口显示它？
回答 4
Stack Overflow用户
发布于 2016-10-04 19:48:04
在使用bootstrap模式类(v3.3.7)时，也可以使用以下类...help-inline和help-block在模式下不起作用。
<span class="error text-danger">Some Errors related to something</span>输出结果如下所示：
Stack Overflow用户
发布于 2013-01-17 02:27:56
通常，在错误发生的位置附近显示错误是最好的。例如，如果有人在输入他们的电子邮件时出错，您可以突出显示电子邮件输入框。
这篇文章有几个很好的例子。http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/
此外，twitter bootstrap有一些很好的样式可以帮助实现(向下滚动到验证状态部分) http://twitter.github.com/bootstrap/base-css.html#forms
突出显示每个输入框有点复杂，所以最简单的方法是在顶部放置一个引导程序警告，其中包含用户做错了什么的详细信息。http://twitter.github.com/bootstrap/components.html#alerts
Stack Overflow用户
发布于 2017-03-22 19:21:20
对于Bootstrap v4使用：
form-group包装器的has-danger，
用于输入以显示图标的form-control-danger (将在输入末尾显示✖)，
消息包装器的form-control-feedback
示例：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="form-group has-danger">
<input type="text" class="form-control form-control-danger">
<div class="form-control-feedback">Not valid :(</div>
</div>
https://stackoverflow.com/questions/14361517
复制相似问题
腾讯云开发者
