布尔玛能见度

Bulma是 Jeremy Thomas 开发的开源 CSS 框架。该框架基于 CSS Flexbox 属性。它具有高度响应性，最大限度地减少了对响应行为的媒体查询的使用。

Visibility是 Bulma 中的帮助类之一，它可以根据视口显示或隐藏内容。我们可以使用很多类来显示或隐藏任何内容。

显示内容：以下类用于显示内容。

• 是块
• is-flex
• 是内联的
• 是内联块

is-flex 辅助类：

• is-flex-mobile ：Flex 仅适用于宽度小于 748 像素的手机。
• is-flex-tablet-only : Flex 将应用于 769px 和 1023px 之间的平板电脑
• is-flex-desktop-only : Flex 将应用于 1024px 和 1215px 之间的桌面

示例：以下代码演示了is-flex-mobile类。开发者可以根据需要使用其他类。

HTML

  

    
    

  

    

        GeeksforGeeks
    
    Bulma Visibility
    
 

      
    

        
GeeksforGeeks text1 
           
        
 GeeksforGeeks text2
    

  

输出：

• 当屏幕尺寸小于 748 像素时。

• 当屏幕尺寸大于 748 像素时。

隐藏内容类：我们可以使用以下类来根据视口隐藏内容。

• is-hidden-mobile ：它将隐藏宽度小于 748 像素的手机中的内容。
• is-hidden-tablet-only ：它将在平板电脑中隐藏 769px 到 1023px 之间的内容。
• is-hidden-desktop-only ：它将隐藏桌面中 1024px 和 1215px 之间的内容。
• is-hidden-widescreen-only ：它将在 1216px 和 1407px 之间隐藏宽屏中的内容。

示例：以下代码演示了is-hidden-mobile类。开发者可以根据需要使用其他类。

HTML

  

    
    

  

    

        GeeksforGeeks
    
    Bulma Visibility
    
 

      
    

        
GeeksforGeeks1
           
        
GeeksforGeeks2
    

  

输出：

• 当屏幕尺寸小于 748 像素（移动尺寸）时，内容将被隐藏。

• 当屏幕尺寸大于 748 像素时，内容将显示给用户。