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

发布时间：2020-12-17 23:34:35 所属栏目：安全来源：网络整理

导读：我已经开始使用Bootstrap为了实现一个漂亮的页面设计，而不诉诸GWT(后端是用java做的) 对于我的登录屏幕，我复制了这个example.现在我想标记一个错误，例如，用户名为空。所以我想知道什么是在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>

这是什么样子：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!