什么是引导容器？

Bootstrap 容器是 Bootstrap 中最基本的布局元素。引导容器是包装页面内容的引导的非常重要和基本的构建块。它负责根据视口或给定设备设置和对齐其中的内容。容器在容器类(.container)中定义。换句话说，我们可以说容器为布局建立了宽度以提供内容。元素和内容被添加到容器中。

容器用于多种用途，例如 -

• 它需要与默认网格系统一起使用。
• 为布局建立宽度以提供网页内容。
• 提供任何 Web 项目的响应式固定行为。
• 设置处理布局响应行为的内容边距。

Bootstrap 有默认类或预定义类是“.container”和“.container-fluid”类用于布局。容器用于包含、填充和（有时）将内容居中。虽然容器可以嵌套，但大多数布局不需要嵌套容器。

基本上，引导程序中提供了三种类型的容器类：

1. 默认容器（容器）
2. 响应式容器（连同 sm、md、lg、xl、xxl）
3. 流体容器（容器流体）

1. Default-Container：默认容器使用'.container'类。它提供了一个响应式的固定宽度容器。

句法：

2. 响应式容器：响应式容器本质上是响应式的。响应式容器允许您指定一个宽的类，直到达到指定的断点，之后我们为每个更高的断点应用最大宽度。

句法：

Wide for small breakpoint
Wide for medium breakpoint
Wide for large breakpoint
Wide for extra large breakpoint
Wide for extra large breakpoint

3.流体容器：流体容器使用'.container-fluid'类。它用于全宽容器，跨越视口的整个宽度。

句法：

在所有其他样式表之前将 Bootstrap 和 jQuery CDN 包含在 部分中以加载我们的 CSS。

示例 1：在本示例中，我们将看到如何在引导程序中使用默认容器“.container”类，并了解它是如何在网页中使用的。

HTML

  

    
    
    
    
    
    

  

    
          
        Default-Container
          
        
            This is the example of 
            container in bootstrap
        
    

  

输出：

Bootstrap 中的默认容器

示例 2：在此示例中，我们将看到响应式容器使用的示例，如 '.container-sm' 等，引导程序中的类，并了解它是如何在网页中使用的。

HTML

  

    
    
    
    
    
    

  

    
          
        Responsive-Container
          
        
            This is the example of 
            container in bootstrap
        
    

  

输出：

Bootstrap 中的响应式容器

示例 3：在本示例中，我们将看到在引导程序中使用流体容器“.container-fluid”类，并了解它是如何在网页中使用的。

HTML

  

    
    
    
    
    
    

  

    
          
        Fluid-Container
          
        
            This is the example of 
            container in bootstrap
        
    

  

输出：

Bootstrap 中的流体容器