Κουτί Εξοπλισμού Bootstrap 5

Κουτί Εξοπλισμού Bootstrap 5

从前一章中您学到了，Bootstrap 需要包含元素来包装站点内容。

我们在容器中填充内容，并且有两个容器类可用：

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

固定容器

使用 .container 类创建响应式、固定宽度的容器。

请注意，它的宽度（max-width）会在不同的屏幕尺寸上发生变化：

Μικρή
<576px 		Μικρή
≥576px 		Μέση
≥768px 		Μεγάλη
≥992px 		Extra Large
≥1200px 		XXL
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

请打开下面的例子并调整浏览器窗口的大小，来查看容器宽度在不同断点处发生的变化：

Παράδειγμα

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

Δοκιμάστε το προσωπικά

XXL 断点（≥1400px）是 Bootstrap 5 中新增的，而 Bootstrap 4 中最大的断点是 Extra large（≥1200px）。

流体容器

使用 .container-fluid 类创建全宽容器，它总是跨越整个屏幕宽度（width 总是 100%）：

Παράδειγμα

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

Δοκιμάστε το προσωπικά

容器填充

默认情况下，容器有左右填充（左右内边距），没有顶部或底部填充（上下内边距）。因此，我们常使用 spacing 工具（utilities），诸如额外的填充和边距，使它们看起来更好。例如，.pt-5 的意思是“添加一个大的顶部填充：

Παράδειγμα

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

Δοκιμάστε το προσωπικά

Περιθώρια και χρώματα κουτιών

Άλλα εργαλεία, όπως τα περιθώρια και τα χρώματα, χρησιμοποιούνται συχνά μαζί με τα κουτιά:

Παράδειγμα

<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 να καθορίσει πότε πρέπει να ανταποκρίνονται.

Τα κλάση του κουτιού max-width θα αλλάζει στις διαφορετικές διαστάσεις οθόνης/περιπτώσεων χρήσης:

Κλάση Μικρή
<576px		 Μικρή
≥576px		 Μέση
≥768px		 Μεγάλη
≥992px		 Μεγάλη
≥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>

Δοκιμάστε το προσωπικά