Grid Bootstrap 5

Sistem Grid Bootstrap 5

Sistem grid Bootstrap dibangun dengan flexbox, dan halaman dapat membenarkan maksimum 12 kolom.

Jika anda tidak ingin menggunakan semua 12 kolom secara terpisah, anda boleh menggabungkan kolom ini untuk menciptakan kolom yang lebar lebih besar:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

Sistem grid responsif, kolom akan diatur semula secara automatik berdasarkan saiz skrin.

Pastikan jumlahnya sama atau kurang daripada 12 (jika anda tidak mengguna kesemua 12 kolom yang tersedia).

Kelas grid

Sistem grid Bootstrap 5 mempunyai enam kelas:

  • .col- (peranti kecil ekstra - lebar layar kurang daripada 576px)
  • .col-sm- (peranti kecil - lebar layar setara atau lebih besar daripada 576px)
  • .col-md- (peranti sedang - lebar layar setara atau lebih besar daripada 768 paksi)
  • .col-lg- (peranti besar - lebar layar setara atau lebih besar daripada 992 paksi)
  • .col-xl- (peranti xlarge - lebar layar setara atau lebih besar daripada 1200px)
  • .col-xxl- (peranti xxlarge - lebar layar setara atau lebih besar daripada 1400px)

Anda dapat menggabungkan kelas di atas untuk menciptakan tata letak yang lebih dinamik dan fleksibel.

提示：Setiap kelas diukur proporsional, jadi jika anda ingin untuk sm dan md Untuk menetapkan lebar yang sama, anda hanya perlu menentukan sm。

Struktur asas grid Bootstrap 5

Berikut adalah struktur asas grid Bootstrap 5:

<!-- 控制列宽，以及它们在不同设备上的显示方式 -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<!-- 或者让 Bootstrap 自动处理布局 -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

第一个例子：创建一行（<div class="row">）。然后，添加所需数量的列（带有合适的 .col-*-* 类的标签）。第一颗星 (*) 代表响应度：sm、md、lg、xl 或 xxl，而第二颗星代表数字，每行加起来应为 12。

第二个例子：不是给每个 col 添加一个数字，而是让 bootstrap 处理布局，以创建等宽的列：两个 "col" 元素 = 每个 col 为 50% 宽度，而三个 cols = 每个 col 为 33.33% 宽度。四个列 = 25% 宽度，等等。您还可以使用 .col-sm|md|lg|xl|xxl 使列获得响应性。

下面我们整理了一些基本的 Bootstrap 5 网格布局的例子。

三等分列

下例显示如何在所有设备和屏幕宽度上创建三个等宽列：

实例

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

亲自试一试

响应式列

下例显示了如何从平板电脑开始创建四个等宽的列，然后扩展到超大桌面。在宽度小于 576px 的手机或屏幕上，列会自动堆叠在一起：

实例

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

亲自试一试

两个不等的响应式列

下例显示了如何在平板电脑得到两个不同宽度的列并扩展到超大型桌面：

实例

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

亲自试一试

提示：您将在本教程的后面学习有关 网格系统 的更多内容。