Bootstrap是一个流行的框架，具有许多现成的组件可供选择。 Bootstrap可以优化用于实现视差滚动的代码。

在本章中，让我们以示例讨论如何使用巨无霸组件来实现视差滚动。

带有Bootstrap4的全宽视差页面

想象一下一个网站，其中向用户显示了一个大的“号召性用语”框，其中包含有关折扣或销售的一些内容。通常，超大型机可以在这样的地方找到应用。这是一个大盒子，可以吸引用户的注意。

由于我们仅使用Bootstrap的一个组件，因此在此示例中，我们不会创建单独的CSS文件。让我们直接深入研究HTML代码。

  
       
        
      
        
     
   
     
      
  
         
  
            
Jumbotron Example
  
            
Example text for parallax using jumbotron
  
         
  
      
  
      
 
  
   
   
  

代码分析

第6行引用了Bootstrap 4库。我们将指定从8号线到11号线的巨无霸的边距和边界半径。

正如我们在第33行看到的那样，我们正在使用jumbotron类创建一个div，以显示将在其中加载特定图像的大框。请注意，这次图片没有直接URL，我们将使用下载的图片。您可以下载示例的任何高分辨率图像，然后在第16行中指定它。

执行上面给定代码时可以看到的输出如下所示：