您从上一章了解到 Bootstrap 需要一个包含 元素来包装网站内容。
容器用于填充里面的内容 其中,有两个可用的容器类:
.container
类提供响应式固定宽度容器
.container-fluid
类提供一个全宽容器,跨越视口的整个宽度
使用 .container
类创建响应式、固定宽度的容器。
请注意,它的宽度(max-width
)会在不同的屏幕尺寸上发生变化:
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra Large ≥1200px |
XXL ≥1400px |
|
---|---|---|---|---|---|---|
max-width | 100% | 540px | 720px | 960px | 1140px | 1320px |
打开下面的示例并调整浏览器窗口的大小,可以看到容器宽度在不同的断点处会发生变化:
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
自己尝试一下→
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
<p>Resize the browser window to see that the container width will change at different breakpoints.</p>
</div>
</body>
</html>
XXL 断点(≥1400px)是 Bootstrap 5 中的新断点,而 Bootstrap 4 中最大的断点是 Extra Large(≥1200px)。
Fluid
(全宽容器)容器使用 .container-fluid
类创建一个全宽容器,它将始终跨越屏幕的整个宽度(宽度
始终为 100%
):
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
自己尝试一下→
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</body>
</html>
默认情况下,容器具有左内边距和右内边距,没有顶部或底部内边距。因此,我们经常使用间距实用程序,例如额外的填充和边距,以使它们看起来更好。例如, .pt-5
表示“添加一个大的顶部填充”:
<div class="container pt-5"></div>
自己尝试一下→
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container pt-5">
<h1>My First Bootstrap Page</h1>
<p>This container has an extra top padding.</p>
<p>Try to remove the .pt-5 class to see the difference.</p>
</div>
</body>
</html>
其他实用程序,例如边框和颜色,也经常与容器一起使用:
<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>
自己尝试一下→
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container p-5 my-5 border">
<h1>My First Bootstrap Page</h1>
<p>This container has a border and some extra padding and margins.</p>
</div>
<div class="container p-5 my-5 bg-dark text-white">
<h1>My First Bootstrap Page</h1>
<p>This container has a dark background color and a white text, and some extra padding and margins.</p>
</div>
<div class="container p-5 my-5 bg-primary text-white">
<h1>My First Bootstrap Page</h1>
<p>This container has a blue background color and a white text, and some extra padding and margins.</p>
</div>
</body>
</html>
您将在后面的章节中了解有关颜色和边框实用程序的更多信息。
您还可以使用 .container-sm|md|lg|xl 类来确定容器何时应响应。
容器的最大宽度将在不同的屏幕尺寸/视口上发生变化:
Class |
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
XXL ≥1400px |
---|---|---|---|---|---|---|
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>
自己尝试一下→
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container pt-3">
<h1>Responsive Containers</h1>
<p>Resize the browser window to see the effect.</p>
</div>
<div class="container-sm border">.container-sm</div>
<div class="container-md mt-3 border">.container-md</div>
<div class="container-lg mt-3 border">.container-lg</div>
<div class="container-xl mt-3 border">.container-xl</div>
<div class="container-xxl mt-3 border">.container-xxl</div>
</body>
</html>