0
点赞
收藏
分享

微信扫一扫

Bootstrap 5 容器

爱动漫建模 2024-11-06 阅读 13
开发语言

Bootstrap 5 容器

Bootstrap 5 是一个流行的前端框架,用于快速开发响应式和移动设备优先的网页。在 Bootstrap 5 中,容器是布局的基础,用于容纳页面内容并使其居中。本文将详细介绍 Bootstrap 5 中的容器,包括其用途、样式和如何使用。

容器简介

在 Bootstrap 5 中,容器是用于包裹页面内容的元素。它们确保内容在不同屏幕尺寸上都能正确显示,并且居中。Bootstrap 5 提供了两种容器:

  1. 固定容器(.container:具有固定的宽度,随着屏幕尺寸的变化而变化。
  2. 流体容器(.container-fluid:宽度为 100%,随着屏幕尺寸的变化而变化。

固定容器

固定容器是 Bootstrap 5 中的默认容器。它具有以下特点:

  • 在超小屏幕(<576px)上,容器的宽度为 100%。
  • 在小屏幕(≥576px)上,容器的宽度为 540px。
  • 在中等屏幕(≥768px)上,容器的宽度为 720px。
  • 在大屏幕(≥992px)上,容器的宽度为 960px。
  • 在超大屏幕(≥1200px)上,容器的宽度为 1140px。

要使用固定容器,只需在 HTML 代码中添加一个带有 container 类的 div 元素:

举报

相关推荐

0 条评论