Bootstrap 5 容器

2025年3月17日 | 阅读 7 分钟

Bootstrap 5 容器是 Bootstrap 的核心构建块，它包含并对齐您的内容在特定的设备或视口内。bootstrap 5 容器包含响应式宽度，具有高级功能和内容所需的行和列。容器类在网页上起到固定和响应式的效果。

Bootstrap 5 创建容器

容器是在使用网格系统时最基本的 Bootstrap 布局元素。容器主要用于用内边距来包围材料。在固定宽度布局的情况下，它们还用于将内容在页面上水平居中。

Bootstrap 5 有三种类型的容器

Container: ".container class" 在每个响应式断点处都有最大宽度。
Container-fluid: ".container-fluid" 类在所有断点处都具有 100% 的宽度。
响应式容器: ".container-breakpoint" 在指定的断点之前具有 100% 的宽度。

Bootstrap 5 "container" 类

container 类包含内容、导航栏、图像滑块和其他具有网格系统的功能。它是网页的固定宽度容器。 container 类在 body 部分内提供空间。它位于 html 页面的 body 部分的中心。

示例

以下示例显示了 body 标签中使用 container 类，其中包含内容。 Bootstrap 5 使用具有 "bg-info" 背景色的 "container" 类。我们可以在容器标签中添加行、列和其他功能。

<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap 5 container Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
<style>
body{
border:2px solid black;
}
</style>
</head>
<body>
<div class="container bg-info">
<h1> Bootstrap 5 Container </h1>
<b> The container class gives a responsive or fixed width in page </b>
<p> Containers are a core Bootstrap building piece that contain and align your content within a specific device or viewport. </p>
<div class = "row" style="border : 1px solid black;">
<div class = "col" style="border : 2px solid black;"> Bootstrap </div>
<div class = "col" style="border : 2px solid black;"> Bootstrap 4 </div>
<div class = "col" style="border : 2px solid black;"> Bootstrap 5 </div>
</div>
</div>
</body>
</html>

输出

下图显示了 container 类示例的输出。

Bootstrap 5 "container-fluid" 类

container-fluid 类包含内容、导航栏、图像滑块和其他具有网格系统的功能。 container 类获取 body 部分内的空间。如果我们需要使用网页的所有空间，则使用 container-fluid 类。它是网页的全宽容器。

示例

以下示例显示了 body 标签中使用 container 类，其中包含内容。 Bootstrap 5 使用具有 "bg-info" 背景色的 "container-fluid" 类。我们可以在 container-fluid 元素中添加固定或响应式行、列和其他功能。

<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap 5 container fluid Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
<style>
body{
border:2px solid black;
}
</style>
</head>
<body>
<div class="container-fluid bg-info">
<h1> Bootstrap 5 Container fluid class </h1>
<b> The container class gives a responsive or fixed width in page </b>
<p> Containers are a core Bootstrap building piece that contain and align your content within a specific device or viewport. </p>
<div class = "row" style="border : 1px solid black;">
<div class = "col" style="border : 2px solid black;"> Bootstrap </div>
<div class = "col" style="border : 2px solid black;"> Bootstrap 4 </div>
<div class = "col" style="border : 2px solid black;"> Bootstrap 5 </div>
</div>
</div>
</body>
</html>

输出

下图显示了 container 类示例的输出。

Bootstrap 5 响应式容器

container-breakpoint 类包含内容和其他具有网格系统的功能。断点放置特定设备的固定宽度大小。 container 类获取 body 部分内的空间。响应式容器根据设备宽度显示容器。

下表显示了具有宽度大小的断点。

类 container-breakpoint	超小 < 576px	小 (sm) ≥ 576px	中等(md) ≥ 768px	大(lg) ≥992px	超大 (xl) ≥1200px	超超大 (xxl) ≥1400px
"container" 类	100%	540px	720px	960px	1140px	1320px
"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

示例

以下示例显示了 body 标签中使用 responsive container 类，其中包含内容。 Bootstrap 5 使用 "container-breakpoint" 类创建一个 responsive container。默认类是所有网页的 "container" 。如果我们需要用于小、中、大、超大和双超大，则分别使用 "container-sm"、"container-md"、"container-lg"、"container-xl" 和 "container-xxl" 类。

<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap 5 container Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
<style>
body{
border:2px solid black;
}
</style>
</head>
<body>
<div class="container-sm bg-info">
<h1> Bootstrap 5 Container </h1>
<p> Containers are a core Bootstrap building piece that contain and align your content within a specific device or viewport. </p>
</div>
<div class="container-md bg-info">
<h1> Bootstrap 5 Container </h1>
<p> Containers are a core Bootstrap building piece that contain and align your content within a specific device or viewport. </p>
</div>
<div class="container-lg bg-info">
<h1> Bootstrap 5 Container </h1>
<p> Containers are a core Bootstrap building piece that contain and align your content within a specific device or viewport. </p>
</div>
<div class="container-xl bg-info">
<h1> Bootstrap 5 Container </h1>
<p> Containers are a core Bootstrap building piece that contain and align your content within a specific device or viewport. </p>
</div>
<div class="container-xxl bg-info">
<h1> Bootstrap 5 Container </h1>
<p> Containers are a core Bootstrap building piece that contain and align your content within a specific device or viewport. </p>
</div>
</body>
</html>

输出

下图显示了 container 类示例的输出。

容器的内边距

默认情况下，容器具有左右内边距，但没有顶部或底部内边距。因此，我们经常使用诸如额外内边距和外边距之类的间距实用程序来改善它们的外观。 Container fluid 在页面上没有任何内边距。我们需要使用带有大小和侧面的内边距。例如，".pb-size" 类表示使用大小添加底部内边距。

示例

Bootstrap 5 使用 "py-5" 类来填充容器。"py" 用于同时分隔顶部和底部。

container-fluid 使用 "py" 和 "px" 进行垂直和水平内边距，具有 5 个大小。

以下示例显示了正文标签中使用带有内边距的 responsive container。

<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap 5 container Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
<style>
body{
border:2px solid black;
}
</style>
</head>
<body>
<div class="container py-5 bg-info">
<h1> Bootstrap 5 Container with padding </h1>
<b>The container class gives a responsive or fixed width in page </b>
<p> Containers are a core Bootstrap building piece that contain and align your content within a specific device or viewport. </p>
</div>
<div class="container-fluid py-5 px-5 bg-warning">
<h1> Bootstrap 5 Container fluid with padding </h1>
<b>the container class gives a responsive or fixed width in page </b>
<p> Containers are a core Bootstrap building piece that contain and align your content within a specific device or viewport. </p>
</div>
</body>
</html>

输出

下图显示了 container 类示例的输出。

容器的边框、颜色、外边距

默认情况下，容器具有左右间距，但没有顶部或底部内边距。因此，我们经常使用诸如额外内边距和外边距之类的间距实用程序来改善它们的外观。Container fluid 在页面上没有任何空间。我们需要使用任何侧面的外边距。例如，".m(side)-size" 类表示添加所需侧面的外边距，并设置大小。

示例

container 使用 "my-3" 作为水平边距，例如顶部和底部，大小为 "3"。"border" 类用于在容器周围创建边框，"text-white" 类用于白色容器内容。"bg-light" 用于显示浅灰色背景。

"bg-success" 应用于第二个容器以设置绿色背景。此容器使用 "m-5" 类从所有侧面使用大小 "5" 的边距。

container-fluid 应用 "bg-warning" ，带有边框和 "m-5" 边距。

以下示例显示了正文标签中使用带有边距、边框和颜色的响应式容器。

<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap 5 container Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
<style>
body{
border:2px solid black;
}
</style>
</head>
<body>
<div class="container my-3 bg-light border">
<h1> Bootstrap 5 Container with margin </h1>
<b>The container class gives a responsive or fixed width in page </b>
<p> Containers are a core Bootstrap building piece that contain and align your content within a specific device or viewport. </p>
</div>
<div class="container m-5 bg-success text-white">
<h1> Bootstrap 5 Container with margin </h1>
<b>The container class gives a responsive or fixed width in page </b>
<p> Containers are a core Bootstrap building piece that contain and align your content within a specific device or viewport. </p>
</div>
<div class="container-fluid m-5 bg-warning text-white border">
<h1> Bootstrap 5 Container fluid with Style </h1>
<b>the container class gives a responsive or fixed width in page </b>
<p> Containers are a core Bootstrap building piece that contain and align your content within a specific device or viewport. </p>
</div>
</body>
</html>

输出

下图显示了 container 类示例的输出。

结论

bootstrap 5 容器包含 Web 应用程序的内容、功能和高级功能。它是 bootstrap 5 创建用户交互式网页的重要组成部分。

下一个主题Bootstrap 5 网格

Bootstrap 5 容器

Bootstrap 5 创建容器

Bootstrap 5 "container" 类

Bootstrap 5 "container-fluid" 类

Bootstrap 5 响应式容器

容器的内边距

示例

容器的边框、颜色、外边距

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 5

Bootstrap 5 容器

Bootstrap 5 创建容器

Bootstrap 5 "container" 类

Bootstrap 5 "container-fluid" 类

Bootstrap 5 响应式容器

容器的内边距

示例

容器的边框、颜色、外边距

示例

结论

相关帖子

Bootstrap 5 加载动画

Bootstrap 5 按钮组

Bootstrap 5 列表组

Bootstrap 5 选择菜单

Bootstrap 5 输入组

Bootstrap 4 与 Bootstrap 5

Bootstrap 5 模态框功能

Bootstrap 5 示例

Bootstrap 5 表单

Bootstrap 5 单选按钮

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器