极客教程什么是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中的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中的响应式容器。
例子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>
输出:
Bootstrap中的Fluid-container。