Bulma - 多行文本输入框

描述

当需要多行输入时，使用 Bulma 多行文本输入框。如在之前的章节中所述，多行文本输入框也使用相同的修饰符。让我们为每个修饰符创建简单的示例，以便轻松理解它们。

颜色

以下示例描述了如何在多行文本输入框中使用颜色修饰符，如 is-primary、is-info、is-success、is-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">
               Textarea Field Colors
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Primary Textarea 
            </span>
            <div class = "field">
               <div class = "control">
                    <textarea class = "textarea is-primary" type = "text" placeholder = "Enter your input"></textarea>
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Info Textarea
            </span>
            <div class = "field">
               <div class = "control">
                  <textarea class = "textarea is-info" type = "text" placeholder = "Enter your input"></textarea>
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Success Textarea
            </span>
            <div class = "field">
               <div class = "control">
                  <textarea class = "textarea is-success" type = "text" placeholder = "Enter your input"></textarea>
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Warning Textarea
            </span>
            <div class = "field">
               <div class = "control">
                  <textarea class = "textarea is-warning" type = "text" placeholder = "Enter your input"></textarea>
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Danger Textarea
            </span>
            <div class = "field">
               <div class = "control">
                  <textarea class = "textarea is-danger" type = "text" placeholder = "Enter your input"></textarea>
               </div>
            </div>
            
         </div>
      </section>
      
   </body>
</html>

它显示以下输出 -

大小

以下示例描述了多行文本输入框字段的不同类型的尺寸，如 is-small、is-medium 和 is-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">
               Textarea Field Sizes
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Small Textarea
            </span>
            <div class = "field">
               <div class = "control">
                  <textarea class = "textarea is-small" type = "text" placeholder = "Enter your input"></textarea>
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Normal Textarea
            </span>
            <div class = "field">
               <div class = "control">
                  <textarea class = "textarea" type = "text" placeholder = "Enter your input"></textarea>
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Medium Textarea
            </span>
            <div class = "field">
               <div class = "control">
                  <textarea class = "textarea is-medium" type = "text" placeholder = "Enter your input"></textarea>
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Large Textarea
            </span>
            <div class = "field">
               <div class = "control">
                  <textarea class = "textarea is-large" type = "text" placeholder = "Enter your input"></textarea>
               </div>
            </div>
            
         </div>
      </section>
      
   </body>
</html>

它显示以下输出 -

状态

可以使用诸如 is-hovered、is-focused、is-loading 这样的类将多行文本输入框显示为不同的类型状态，如下面的示例所示 -

实时演示

<!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">
               Textarea States
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Normal Textarea
            </span>
            <div class = "field">
               <div class = "control">
                  <textarea class = "textarea" type = "text" placeholder = "Normal textarea"></textarea>
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Hover Textarea
            </span>
            <div class = "field">
               <div class = "control">
                  <textarea class = "textarea is-hovered" type = "text" placeholder = "Enter your input"></textarea>
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Focus Textarea
            </span>
            <div class = "field">
               <div class = "control">
                  <textarea class = "textarea is-focused" type = "text" placeholder = "Enter your input"></textarea>
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Loading Textarea
            </span>
            <div class = "control is-loading">
               <textarea class = "textarea" type = "text" placeholder = "Enter your input"></textarea>
            </div>
            <br>
            
            <span class = "is-size-5">
               Disabled Textarea
            </span>
            <div class = "control">
               <textarea class = "textarea" type = "text" placeholder = "Enter your input" disabled></textarea>
            </div>
         </div>
      </section>
      
   </body>
</html>

它显示以下输出 -

bulma_form.htm

打印页面

上一个

下一个