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

列印頁面

上一個

下一個