Computer >> Máy Tính >  >> Lập trình >> Javascript

Các trạng thái xác thực Bootstrap


Bootstrap bao gồm các kiểu xác nhận lỗi, cảnh báo và thông báo thành công. Để sử dụng, chỉ cần thêm lớp thích hợp (.has-warning, .has-error hoặc .has-success) vào phần tử mẹ.

Ví dụ

Bạn có thể thử chạy đoạn mã sau để triển khai các trạng thái xác thực

<!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>