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

查看.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>

这是什么样子：