我已经开始使用Bootstrap来实现漂亮的页面设计而无需借助GWT(后端是用Java制作的)
对于我的登录屏幕,我复制了此示例。现在,我想标记一个错误,例如,用户名留空。所以我想知道Bootstrap框架中的程序是什么。或者,如果有示例显示有错误的表格。
我不确定该想法是在红色输入元素内显示错误消息,还是在输入元素下方显示错误消息,或者是否弹出窗口?
(已通过Bootstrap v4,v3和v3的示例进行了更新)
过去几个主要版本的Bootstrap的带有验证类的表单示例。
Bootstrap v4
在Codepen上查看实时版本
<div class="container">
<form>
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-label text-success">Email</label>
<div class="col-sm-7">
<input type="email" class="form-control is-valid" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label text-danger">Password</label>
<div class="col-sm-7">
<input type="password" class="form-control is-invalid" id="inputPassword" placeholder="Password">
</div>
<div class="col-sm-3">
<small id="passwordHelp" class="text-danger">
Must be 8-20 characters long.
</small>
</div>
</div>
</form>
</div>
Bootstrap v3
在Codepen上查看实时版本
<form role="form">
<div class="form-group has-warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<input type="text" class="form-control" id="inputWarning">
<span class="help-block">Something may have gone wrong</span>
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError">Input with error</label>
<input type="text" class="form-control" id="inputError">
<span class="help-block">Please correct the error</span>
</div>
<div class="form-group has-info">
<label class="control-label" for="inputError">Input with info</label>
<input type="text" class="form-control" id="inputError">
<span class="help-block">Username is taken</span>
</div>
<div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input with success</label>
<input type="text" class="form-control" id="inputSuccess" />
<span class="help-block">Woohoo!</span>
</div>
</form>
Bootstrap v2
在jsfiddle上查看实时版本
的.error
,.success
,.warning
和.info
类被附加到.control-group
。这是v2中的标准Bootstrap标记和样式。只要遵循该步骤,您就可以保持良好状态。当然,如果愿意,您可以按照自己的样式添加弹出窗口或“嵌入式Flash”,但是如果您遵循Bootstrap约定并将这些验证类挂在其上.control-group
,它将保持一致且易于管理(至少因为将会继续受益于Bootstrap文档和示例)
<form class="form-horizontal">
<div class="control-group warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">Something may have gone wrong</span>
</div>
</div>
<div class="control-group error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>
<div class="control-group info">
<label class="control-label" for="inputInfo">Input with info</label>
<div class="controls">
<input type="text" id="inputInfo">
<span class="help-inline">Username is taken</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">Input with success</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">Woohoo!</span>
</div>
</div>
</form>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句