Bootstrap 5 容器
Bootstrap 5 容器
Bootstrap 5 是一个流行的前端框架,用于快速开发响应式和移动设备优先的网页。在 Bootstrap 5 中,容器是布局的基础,用于容纳页面内容并使其居中。本文将详细介绍 Bootstrap 5 中的容器,包括其用途、样式和如何使用。
容器简介
在 Bootstrap 5 中,容器是用于包裹页面内容的元素。它们确保内容在不同屏幕尺寸上都能正确显示,并且居中。Bootstrap 5 提供了两种容器:
- 固定容器(
.container
):具有固定的宽度,随着屏幕尺寸的变化而变化。 - 流体容器(
.container-fluid
):宽度为 100%,随着屏幕尺寸的变化而变化。
固定容器
固定容器是 Bootstrap 5 中的默认容器。它具有以下特点:
- 在超小屏幕(<576px)上,容器的宽度为 100%。
- 在小屏幕(≥576px)上,容器的宽度为 540px。
- 在中等屏幕(≥768px)上,容器的宽度为 720px。
- 在大屏幕(≥992px)上,容器的宽度为 960px。
- 在超大屏幕(≥1200px)上,容器的宽度为 1140px。
要使用固定容器,只需在 HTML 代码中添加一个带有 container
类的 div
元素: