Bulma — 按钮

上一个
下一个

描述

按钮元素提供了具有自定义按钮样式的用户交互，可以在表单、对话中用作操作，并支持不同类型的尺寸、颜色、状态等。可以通过在锚链接、输入标签等元素上使用.button 类将按钮包含到页面中。

颜色和尺寸

下面的示例使用颜色修饰符（例如is-primary、is-info、is-link、is-success、is-warning、is-danger）和按钮的尺寸（例如 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 Buttons 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">
               Buttons
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Basic Buttons
            </span>
            <br>
            
            <a class = "button">Anchor</a>
            <button class = "button">Button</button>
            <input class = "button" type = "submit" value = "Submit">
            <br>
            <br>  
            
            <span class = "is-size-5">
               Button Colors
            </span>
            <br>
            
            <a class = "button is-white">White</a>
            <a class = "button is-light">Light</a>
            <a class = "button is-dark">Dark</a>
            <a class = "button is-black">Black</a>
            <a class = "button is-text">Text</a>
            <br>
            <br>
            
            <a class = "button is-primary">Primary</a>
            <a class = "button is-link">Link</a>
            <a class = "button is-info">Info</a>
            <a class = "button is-success">Success</a>
            <a class = "button is-warning">Warning</a>
            <a class = "button is-danger">Danger</a>
            <br>
            <br>
            
            <span class = "is-size-5">
               Button Sizes
            </span>
            <br>
            
            <a class = "button is-small">Small Button</a>
            <a class = "button">Normal Button</a>
            <a class = "button is-medium">Medium Button</a>
            <a class = "button is-large">Large Button</a>
         </div>
      </section>
      
   </body>
</html>

它将显示以下输出 −

样式

下面的示例使用is-outlined、is-inverted、is-rounded 等类以及按钮的颜色修饰符来描述不同类型的样式 −

现场演示 
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Buttons 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">
               Buttons Styles
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Outlined Buttons
            </span>
            <br>
            
            <a class = "button is-outlined">Outlined</a>
            <a class = "button is-primary is-outlined">Outlined</a>
            <a class = "button is-link is-outlined">Outlined</a>
            <a class = "button is-info is-outlined">Outlined</a>
            <a class = "button is-success is-outlined">Outlined</a>
            <a class = "button is-danger is-outlined">Outlined</a>
            <br>
            <br>  
            
            <span class = "is-size-5">
               Inverted Buttons (text color becomes background color, and vice-versa)
            </span>
            <br>
            
            <div class = "columns">
               <div class = "column is-narrow ">
                  <div class = "box has-background-info" >
                     <a class = "button is-primary is-inverted">Inverted</a>
                     <a class = "button is-link is-inverted">Inverted</a>
                     <a class = "button is-info is-inverted">Inverted</a>
                     <a class = "button is-success is-inverted">Inverted</a>
                     <a class = "button is-danger is-inverted">Inverted</a>
                  </div>
               </div>
            </div>
            
            <span class = "is-size-5">
               Inverted Outlined Buttons (
                  invert color becomes the text and border colors)
            </span>
            <br>
            
            <div class = "columns">
               <div class = "column is-narrow ">
                  <div class = "box has-background-info" >
                     <a class = "button is-primary is-inverted is-outlined">Invert Outlined</a>
                     <a class = "button is-link is-inverted is-outlined">Invert Outlined</a>
                     <a class = "button is-info is-inverted is-outlined">Invert Outlined</a>
                     <a class = "button is-success is-inverted is-outlined">Invert Outlined</a>
                     <a class = "button is-danger is-inverted is-outlined">Invert Outlined</a>
                  </div>
               </div>
            </div>
            
            <span class = "is-size-5">
               Rounded buttons
            </span>
            <br>
            <br>
            
            <a class = "button is-rounded">Rounded</a>
            <a class = "button is-primary is-rounded">Rounded</a>
            <a class = "button is-link is-rounded">Rounded</a>
            <a class = "button is-info is-rounded">Rounded</a>
            <a class = "button is-success is-rounded">Rounded</a>
            <a class = "button is-danger is-rounded">Rounded</a>
         </div>
      </section>
      
   </body>
</html>

它将显示以下输出 −

状态

可以通过使用is-focused、is-active、is-loading 等类并在示例中所述带有图标的按钮将按钮显示为不同类型的状态 −

现场演示 
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Buttons 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">
               Buttons States
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Normal Buttons
            </span>
            <br>
            
            <a class = "button">Normal</a>
            <a class = "button is-primary">Normal</a>
            <a class = "button is-link">Normal</a>
            <br>
            <br>  
            
            <span class = "is-size-5">
               Focus Buttons 
            </span>
            <br>
            
            <a class = "button is-focused">Focus</a>
            <a class = "button is-primary is-focused">Focus</a>
            <a class = "button is-link is-focused">Focus</a>
            <br>
            <br>
            
            <span class = "is-size-5">
               Active Buttons
            </span>
            <br>
            
            <a class = "button is-active">Active</a>
            <a class = "button is-primary is-active">Active</a>
            <a class = "button is-link is-active">Active</a>
            <br>
            <br>
            
            <span class = "is-size-5">
               Loading buttons
            </span>
            <br>
            <br>
            
            <a class = "button is-loading">Loading</a>
            <a class = "button is-primary is-loading">Loading</a>
            <a class = "button is-link is-loading">Loading</a>
            <br>
            <br>
            
            <span class = "is-size-5">
               Disabled buttons
            </span>
            <br>
            <br>
            
            <a class = "button" title = "Disabled button" disabled>Disabled</a>
            <a class = "button is-primary" title = "Disabled button" disabled>Disabled</a>
            <a class = "button is-link" title = "Disabled button" disabled>Disabled</a>
            <br>
            <br>
            
            <span class = "is-size-5">
               Buttons with Icons
            </span>
            <br>
            <br>
            
            <p class = "buttons">
               <a class = "button is-primary">
                  <span class = "icon">
                     <i class = "fab fa-youtube"></i>
                  </span>
                  <span>Youtube</span>
               </a>
               
               <a class = "button is-success">
                  <span class = "icon is-small">
                     <i class = "fas fa-bookmark"></i>
                  </span>
                  <span>Bookmark</span>
               </a>
               
               <a class = "button is-danger is-outlined">
                  <span>Delete</span>
                  <span class = "icon is-small">
                     <i class = "fas fa-trash"></i>
                  </span>
               </a>
            </p>
            
            <span class = "is-size-5">
               Buttons group with addons
            </span>
            <br>
            <br>
            
            <div class = "field has-addons">
               <p class = "control">
                  <a class = "button">
                     <span class = "icon is-small">
                        <i class = "fas fa-bold"></i>
                     </span>
                     <span>Bold</span>
                  </a>
               </p>
               
               <p class = "control">
                  <a class = "button">
                     <span class = "icon is-small">
                        <i class = "fas fa-italic"></i>
                     </span>
                     <span>Italic</span>
                  </a>
               </p>
               
               <p class = "control">
                  <a class = "button">
                     <span class = "icon is-small">
                        <i class = "fas fa-underline"></i>
                     </span>
                     <span>Underline</span>
                  </a>
               </p>
            </div>
            
         </div>
      </section>
      
   </body>
</html>

它将显示以下输出 −

bulma_elements.htm
打印页面
上一个
下一个
广告