“Bootstrap Validation States”的中文翻译是”Bootstrap验证状态”

前端开发教程 2025-02-05 0

Bootstrap 包括错误、警告和成功消息的验证样式。要使用，只需将适当的类（.has-warning、.has-error 或 .has-success）添加到父元素即可。

示例

您可以尝试运行以下代码用于实现验证状态

实时演示

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href = /bootstrap/css/bootstrap.min.css rel = stylesheet>
      <script src = /scripts/jquery.min.js></script>
      <script src = /bootstrap/js/bootstrap.min.js></script>
   </head>
   <body>
      <form class = form-horizontal role = form>
         <div class = form-group>
            <label class = col-sm-2 control-label>Focused</label>
            <div class = col-sm-10>
               <input class = form-control id = focusedInput type = text value = This is focused...>
            </div>
         </div>
         <div class = form-group>
            <label for = inputPassword class = col-sm-2 control-label>Disabled</label>
            <div class = col-sm-10>
               <input class = form-control id = disabledInput type = text placeholder = Disabled input here... disabled>
            </div>
         </div>
         <fieldset disabled>
            <div class = form-group>
               <label for = disabledTextInput class = col-sm-2 control-label>
                  Disabled input (Fieldset disabled)
               </label>
               <div class = col-sm-10>
                  <input type = text id = disabledTextInput class = form-control placeholder = Disabled input>
               </div>
            </div>
            <div class = form-group>
               <label for = disabledSelect class = col-sm-2 control-label>
                  Disabled select menu (Fieldset disabled)
               </label>
               <div class = col-sm-10>
                  <select id = disabledSelect class = form-control>
                     <option>Disabled select</option>
                  </select>
               </div>
            </div>
         </fieldset>
         <div class = form-group has-success>
            <label class = col-sm-2 control-label for = inputSuccess>
               Input with success
            </label>
            <div class = col-sm-10>
               <input type = text class = form-control id = inputSuccess>
            </div>
         </div>
         <div class = form-group has-warning>
            <label class = col-sm-2 control-label for = inputWarning>
               Input with warning
            </label>
            <div class = col-sm-10>
               <input type = text class = form-control id = inputWarning>
            </div>
         </div>
         <div class = form-group has-error>
            <label class = col-sm-2 control-label for = inputError>
               Input with error
            </label>
            <div class = col-sm-10>
               <input type = text class = form-control id = inputError>
            </div>
         </div>
      </form>
   </body>
</html>

以上就是Bootstrap Validation States的中文翻译是Bootstrap验证状态的详细内容，更多请关注双恒网络其它相关文章！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。