我已经开始使用Bootstrap为了实现一个漂亮的页面设计,而不诉诸GWT(后端是用java做的)
对于我的登录屏幕,我复制了这个example.现在我想标记一个错误,例如,用户名为空。所以我想知道什么是在Bootstrap框架中的过程为此。或者也许如果有例子显示错误的形式。
解决方法
这里你去
http://jsfiddle.net/jonschlinkert/pngWh/12/
查看.error,.success,.warning和.info类如何附加到.control-group?这是标准的Bootstrap标记和样式。只要跟着,你的身体状况良好。当然你可以超越你自己的样式,添加一个弹出窗口或“内联闪存”,如果你喜欢,但如果你遵循Bootstrap约定并挂起这些验证类在.control组,它将保持一致和易于管理(在至少因为你将继续有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>
这是什么样子: