如何使用Bootstrap 5创建Jumbotron？

Bootstrap Jumbotron是一个响应组件，其主要目标是引起访问者的注意或突出显示特殊信息。在Jumbotron内部，您几乎可以使用任何其他Bootstrap代码来进一步提高其参与价值。

巨无霸的用途：

• 图片展示
• 突出内容
• 特定主题简介

方法：

• 要创建Jumbotron引导程序，请提供一个名为“ jumbotron”的类。
• Bootstrap使用应用于Jumbotron的一些默认属性，使其成为非常出色的“引人注目”。

示例1：创建一个简单的巨型飞轮：

HTML

  

    

  

    

        
Text to catch user attention/greeting.
        
lorem ipsum.
  
        

          
        
Some dummy text
    

输出：

示例2：要创建全宽Jumbotron，我们将jumbotron-fluid类与Jumbotron类一起使用。

的HTML

   

  

    

  

    

        

            
Fluid jumbotron
            

                This is a modified jumbotron that 
                occupies the entire horizontal 
                space of its parent.
            
        
    

  

输出

示例3：我们还可以设置Jumbotron的样式并添加背景图像，以使其更具吸引力，如下所示。

的HTML

  

    
  
    

  

    

        

            Jumbotron with background image
        
  
        

            Hey, check this out.
        
  
        
            Click!
        
    

  

输出