带有示例的自举程序中元素的可见性

在某些情况下，需要隐藏网页上的某些内容而不影响页面的布局。 Bootstrap使用CSS可见性属性，并提供可见和不可见两个类来控制网页上元素的可见性。

这些类不会影响布局，即不可见元素仍将占用布局中的空间。内容将在视觉上和屏幕阅读器中隐藏。

看不见的阶级
此类的引导程序用于隐藏页面中的元素。在下面的程序中，使用此类隐藏了标题h2“ Bootstrap Tutorial”。此类基本上使用CSS的可见性属性，并将其值设置为hidden。即使标题Bootstrap Tutorial不可见，它仍会占用布局中的空间。

  GeeksForGeeks
    
  
  
  
    
  
  
  
  

  

    
      
       
        
        Bootstrap Tutorial   
          
        
            Bootstrap is the most popular HTML, CSS, and 
            JS framework for developing responsive, 
            mobile-first projects on the web.
        
      
        
      This is some text.      
      This is another text.      
    

输出：

可见的阶级
此类引导程序用于取消隐藏页面中的隐藏元素。在下面的程序中，使用该类使标题h2“ Bootstrap Tutorial”可见。此类基本上使用CSS的可见性属性，并将其值设置为visible 。

可见类在以下示例中无效，因为默认情况下元素是可见的，但是当要使先前不可见的元素可见时，此类可以提供帮助。以编程方式

  GeeksForGeeks
    
  
  
  
    
  
  
  
  

  

    
      
       
        
        GeeksForGeeks      
       
        
            Bootstrap is the most popular HTML, CSS, 
            and JS framework for developing responsive, 
            mobile-first projects on the web.
        
          
      
        
      This is some text.      
      This is another text.    
        
    

输出：

重要事项：

• Bootstrap的可见和不可见类使用CSS的可见性属性来隐藏和取消隐藏元素。
• 隐藏的元素仍将占用布局上的空间。此类仅隐藏和元素，而不会将其删除。
• 这些类不会以任何方式影响或使用CSS的display属性来隐藏或取消隐藏元素。

参考： https://getbootstrap.com/docs/4.1/utilities/visibility/