Bulma教程

Bulma 输入

说明

Bulma 提供用于输入用户数据以及不同类型变体的输入字段。输入字段支持 3 种类型的修饰符-
Color Size State

颜色

下面的例子描述了颜色修饰符的使用,例如 is-primaryis-infois-successis-warning, is-danger 在输入字段-
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Forms Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Input Field Variations
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Primary Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-primary" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Info Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-info" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            <span class = "is-size-5">
               Success Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-success" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Warning Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-warning" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Danger Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-danger" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            
         </div>
      </section>
      
   </body>
</html>
它显示以下输出-

尺寸

下面的示例描述了输入字段的不同类型的大小,例如 is-smallis-mediumis-large 类-
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Forms Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Input Field Sizes
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Small Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-small" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Normal Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Medium Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-medium" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Large Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-large" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            
         </div>
      </section>
      
   </body>
</html>
它显示以下输出-

状态

通过使用 is-hoveredis-focusedis-loading等类,输入字段可以显示在不同类型的状态中i>, 被四舍五入,如下例所示-
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Forms Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Input Field States
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Normal Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Hover Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-hovered" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Focus Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-focused" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Loading Input
            </span>
            <div class = "control is-loading">
               <input class = "input" type = "text" placeholder = "Enter your input">
            </div>
            <br>
            
            <span class = "is-size-5">
               Disabled Input
            </span>
            <div class = "control">
               <input class = "input" type = "text" placeholder = "Enter your input" disabled>
            </div>
            <br>
            
            <span class = "is-size-5">
               Rounded Input
            </span>
            <div class = "control">
               <input class = "input is-rounded" type = "text" placeholder = "Enter your input">
            </div>
            
         </div>
      </section>
      
   </body>
</html>
它显示以下输出-
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4