HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

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>

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

帮助程序

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

S.No. 帮助程序 说明
1 is-clearfix 清除容器内的浮动内容。
2 is-pulled-left 将元素移至左侧。
3 is-pulled-right 将元素移至右侧。
4 is-marginless 删除边距。
5 is-paddingless 删除填充。
6 is-overlay 通过使背景透明来创建元素的叠加效果。
7 is-clipped 添加溢出隐藏。
8 is-radiusless 删除半径。
9 is-shadowless 删除阴影。
10 is-unselectable 单击时，使元素不可选择。
11 is-invisible 隐藏可见性功能。
12 is-sr-only 在视觉上隐藏元素，但可用于屏幕阅读器。

响应式助手

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

  • block

  • flex

  • inline

  • inline-block

  • inline-flex

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

S.No. Class Mobile (till 768px) Tablet (769px to 1023px) Desktop (1024px to 1215px) Widescreen (1216px to 1407px) FullHD (above 1408px)
1 is-flex-mobile flex un-changed un-changed un-changed un-changed
2 is-flex-tablet-only un-changed flex un-changed un-changed un-changed
3 is-flex-desktop-only un-changed un-changed flex un-changed un-changed
4 is-flex-widescreen-only un-changed un-changed un-changed flex un-changed

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

S.No. Class Mobile (till 768px) Tablet (from 769px to 1023px) Desktop (from 1024px to 1215px) Widescreen (from 1216px to 1407px) FullHD (above 1408px)
1 is-flex-touch flex flex un-changed un-changed un-changed
2 is-flex-tablet un-changed flex flex flex flex
3 is-flex-desktop un-changed un-changed flex flex flex
4 is-flex-widescreen un-changed un-changed un-changed flex flex
5 is-flex-fullhd un-changed un-changed un-changed un-changed flex

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

S.No. Class Mobile (till 768px) Tablet (from 769px to 1023px) Desktop (from 1024px to 1215px) Widescreen (from 1216px to 1407px) FullHD (above 1408px)
1 is-hidden-mobile hidden visible visible visible visible
2 is-hidden-tablet-only visible hidden visible visible visible
3 is-hidden-desktop-only visible visible hidden visible visible
4 is-hidden-widescreen-only visible visible visible hidden visible

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

S.No. Class Mobile (till 768px) Tablet (from 769px to 1023px) Desktop (from 1024px to 1215px) Widescreen (from 1216px to 1407px) FullHD (above 1408px)
1 is-hidden-touch hidden hidden visible visible visible
2 is-hidden-tablet visible hidden hidden hidden hidden
3 is-hidden-desktop visible visible hidden hidden hidden
4 is-hidden-widescreen visible visible visible hidden hidden
5 is-hidden-fullhd visible visible visible visible hidden

bulma_modifiers.html

❮ 上一节 下一节 ❯