twitter-bootstrap – 使用Bootstrap在表单中标记错误

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – 使用Bootstrap在表单中标记错误前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经开始使用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>

这是什么样子:

猜你在找的Bootstrap相关文章