Bulma - 修饰符语法和响应式助手

描述

您可以使用修饰符类为元素创建替代样式，并使用响应式类来更改样式。修饰符类以 is-ClassName 或 has-ClassName 开头，使用这些类，您可以为元素提供不同类型的样式。

示例

让我们创建一个简单的按钮以及修饰符类，例如 is-primary、is-info、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 Modifiers 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">
               Simple Button
            </span>
            <br>
            <br>	  
            
            <a class = "button">
               Button
            </a>
         </div>
         <br>
         
         <div class = "container">
            <span class = "title">
               Using Modifier Classes
            </span>
            <br>
            <br>	  
            
            <a class = "button is-primary">is-primary</a>
            <a class = "button is-link">is-link</a>
            <a class = "button is-info">is-info</a>
            <a class = "button is-success">is-success</a>
            <a class = "button is-warning">is-warning</a>
            <a class = "button is-danger">is-danger</a>
         </div>
         <br>
         
          <div class = "container">
            <span class = "title">
            Resized Button
            </span>
            <br>
            <br>	  
            
            <a class = "button is-small">is-small</a>
            <a class = "button is-medium">is-medium</a>
            <a class = "button is-large">is-large</a>
         </div>
      </section>
      
   </body>
</html>

将上述代码保存在 HTML 文件中，然后在浏览器中打开。它将显示如下所示的输出 −

您还可以使用 is-primary、is-outlined、is-loading、is-large 类来更改按钮的 style 或 state，如下所示 −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Modifiers 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">
               State of Button
            </span>
            <br>
            <br>	  
            
            <a class = "button is-primary is-outlined">
               is-outlined
            </a>
            
            <a class = "button is-info is-loading">
               is-loading
            </a>
            
            <a class = "button" disabled>
               disabled
            </a>
            
            <a class = "button is-danger is-outlined is-large">
               is-outlined & is-large
            </a>
         </div>
      </section>
   </body>
</html>

执行上述代码，您将获得如下所示的输出 −

帮助程序

您可以使用以下帮助程序类来更改元素的样式 −

响应式助手

您可以根据视口宽度，使用以下显示类显示内容 −

• block

• flex

• inline

• inline-block

• inline-flex

在这里，我们使用 is-flex 辅助程序来表示与之相关的不同类型的类。您可以使用其他选项，通过将 is-flex 类替换为 is-block、is-inline、is-inline-block 和 is-inline-flex。

您可以使用以下类来显示特定断点之前的元素 −

您可以根据视口宽度使用以下类来隐藏内容 −

您可以使用以下类来隐藏特定断点处的元素 −

bulma_modifiers.html