Bootstrap5菜鸟教程:响应式容器及示例

2022-06-1222:27:00WEB前端开发Comments2,437 views字数 1524阅读模式

Bootstrap 需要包含元素来包装站点内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/24083.html

我们在容器中填充内容,并且有两个容器类可用:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/24083.html

  • .container 类提供了响应式的固定宽度容器
  • .container-fluid 类提供了全宽容器,跨越视口的整个宽度

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/24083.html

固定容器

使用 .container 类创建响应式、固定宽度的容器。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/24083.html

请注意,它的宽度(max-width)会在不同的屏幕尺寸上发生变化:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/24083.html

Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra Large
≥1200px
XXL
≥1400px
max-width100%540px720px960px1140px1320px

请打开下面的例子并调整浏览器窗口的大小,来查看容器宽度在不同断点处发生的变化:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/24083.html

实例

<div class="container">
  <h1>我的第一张 Bootstrap 页面</h1>
  <p>这是一些文本。</p>
</div>

XXL 断点(≥1400px)是 Bootstrap 5 中新增的,而 Bootstrap 4 中最大的断点是 Extra large(≥1200px)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/24083.html

流体容器

使用 .container-fluid 类创建全宽容器,它总是跨越整个屏幕宽度(width 总是 100%):文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/24083.html

实例

<div class="container-fluid">
  <h1>我的第一张 Bootstrap 页面</h1>
  <p>这是一些文本。</p>
</div>

容器填充

默认情况下,容器有左右填充(左右内边距),没有顶部或底部填充(上下内边距)。因此,我们常使用 spacing 工具(utilities),诸如额外的填充和边距,使它们看起来更好。例如,.pt-5 的意思是“添加一个大的顶部填充”:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/24083.html

实例

<div class="container pt-5"></div>

容器边框和颜色

其他工具,诸如边框和颜色,也经常与容器一起使用:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/24083.html

实例

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/24083.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>

响应式容器

您还可以使用 .container-sm|md|lg|xl 类来确定容器何时应该响应。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/24083.html

容器的 max-width 将在不同的屏幕尺寸/视口上发生变化:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/24083.html

Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
XXL
≥1400px
.container-sm100%540px720px960px1140px1320px
.container-md100%100%720px960px1140px1320px
.container-lg100%100%100%960px1140px1320px
.container-xl100%100%100%100%1140px1320px
.container-xxl100%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>
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/24083.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/24083.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定