什么是Bootstrap容器

Bootstrap容器是Bootstrap中最基本的布局元素。Bootstrap 容器是Bootstrap中非常重要的基本构件，它包裹着页面的内容。它负责根据视口或给定设备来设置和调整其中的内容。容器被定义在容器类（.container）中。换句话说，我们可以说，容器是为布局建立的宽度，以给予内容。元素和内容被添加到容器中。

容器有许多用途，如： –

它需要与默认的网格系统一起使用。
为布局建立宽度，以赋予网页内容。
为任何网络项目提供响应性的固定行为。
设置处理你的布局的响应行为的内容保证金。

Bootstrap的默认类或预定义类是”.container”和”.container-fluid” 类，用于布局。容器是用来容纳、垫高和（有时）将内容置于中心位置的。虽然容器可以被嵌套，但大多数布局不需要嵌套的容器。

基本上，在bootstrap中有三种类型的容器类可用。

Default-Container(container)
Responsive-Container(along with sm, md, lg, xl, xxl)
Fluid-Container(container-fluid)

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

语法:

<div class="container">
  <!-- Content here -->
</div>

2.Responsive-Container:响应式容器的本质是响应式的。响应式容器允许你指定一个宽的类，直到达到指定的断点，之后我们对每个更高的断点应用最大宽度。

语法:

<div class="container-sm">Wide for small breakpoint</div>
<div class="container-md">Wide for medium breakpoint</div>
<div class="container-lg">Wide for large breakpoint</div>
<div class="container-xl">Wide for extra large breakpoint</div>
<div class="container-xxl">Wide for extra large breakpoint</div>

3.Fluid-Container： Fluid-container使用’.container-fluid’类。它用于一个全宽的容器，横跨整个视口的宽度。

语法:

<div class="fluid-container">
  <!-- Content here -->
</div>

将Bootstrap和jQuery CDN纳入<head>所有其他样式表之前的部分，以加载我们的CSS。

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” integrity=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” crossorigin=”anonymous”>
<script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js” integrity=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js” integrity=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anonymous”></script
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js” integrity=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl” crossorigin=”anonymous”></script>

例子1：在这个例子中，我们将看到如何使用bootstrap中的默认容器‘.container “类，并知道它是如何在网页中使用的。

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
    </script>
</head>
  
<body>
    <div class="container" 
        style="background-color: yellow;">
          
        <h1>Default-Container</h1>
          
        <p>
            This is the example of 
            container in bootstrap
        </p>
    </div>
</body>
  
</html>

输出:

什么是Bootstrap容器？

Bootstrap中的Default-container。

例子2：在这个例子中，我们将看到bootstrap中”.container-sm “等响应式容器的例子，并知道它是如何在网页中使用的。

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
    </script>
</head>
  
<body>
    <div class=" container container-sm" 
        style="background-color: green;">
          
        <h1>Responsive-Container</h1>
          
        <p>
            This is the example of 
            container in bootstrap
        </p>
    </div>
</body>
  
</html>

输出:

什么是Bootstrap容器？

Bootstrap中的响应式容器。

例子3：在这个例子中，我们将看到bootstrap中fluid-container’.container-fluid’类的使用，并知道它是如何在网页中使用的。

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
    </script>
</head>
  
<body>
    <div class=" container-fluid" 
        style="background-color: blue;">
          
        <h1>Fluid-Container</h1>
          
        <p>
            This is the example of 
            container in bootstrap
        </p>
    </div>
</body>
  
</html>