Makampuni ya Kifungu cha Bootstrap 5

网格系统

Bootstrap 的网格系统是用 flexbox 构建的，页面上最多允许 12 列。

如果您不想单独使用所有 12 列，您可以将这些列组合在一起以创建更宽的列：

网格系统响应迅速，列会根据屏幕大小自动重新排列。

请确保总和等于或小于 12（不需要使用所有 12 个可用列）。

网格类

Bootstrap 5 网格系统提供六个类：

  • .col- (超小型设备 - 屏幕宽度小于 576px)
  • .col-sm- (小型设备 - 屏幕宽度等于或大于 576px)
  • .col-md- (中型设备 - 屏幕宽度等于或大于 768px)
  • .col-lg- (大型设备 - 屏幕宽度等于或大于 992px)
  • .col-xl- (超大型设备 - 屏幕宽度等于或大于 1200px)
  • .col-xxl- (特大型设备 - 屏幕宽度等于或大于 1400px)

组合上述类，可创建更动态和灵活的布局。

提示：每个类都是按比例放大的，所以如果你想为 sm 和 md 设置相同的宽度，你只需要规定 sm。

Muundo wa kifunguo cha Kijifunzea 5

Hiiyo hizi muundo wa kifunguo cha Kijifunzea 5:

亲自试一试

第一个例子：创建一行（

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

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

Chaguo cha jumla ya mtandao

Tafanua hii inaeleza kama jumla Bootstrap 5 jumla ya mtandao inafanya kwa ukubwa wa mawingu ya kila simu:

Kiyaa (>=576px) Kiyaa (>=576px) Kiyaa (>=768px) Kubwa (>=992px) Kubwa zaidi (>=1200px) Kubwa sana (>=1400px)
Kifupi cha kiklasa .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Matumizi ya jumla ya mtandao Inafikia kila wakati kwenye ukingo wa mawingu Inafikia, kwenye mabahari wa juu kwenye ukingo wa mawingu Inafikia, kwenye mabahari wa juu kwenye ukingo wa mawingu Inafikia, kwenye mabahari wa juu kwenye ukingo wa mawingu Inafikia, kwenye mabahari wa juu kwenye ukingo wa mawingu Inafikia, kwenye mabahari wa juu kwenye ukingo wa mawingu
Uwezo wa kufikia kina None (auto) 540px 720px 960px 1140px 1320px
Inayofanana na Simu ya kifaa Simu ya kifaa Kipatasi Kikompyuta Kikompyuta na kifunzi Kikompyuta na kifunzi
Mabara ya mabara 12 12 12 12 12 12
Uwezo wa kufikia 1.5rem (kwa kila barabara ya mabara .75rem ) 1.5rem (kwa kila barabara ya mabara .75rem ) 1.5rem (kwa kila barabara ya mabara .75rem ) 1.5rem (kwa kila barabara ya mabara .75rem ) 1.5rem (kwa kila barabara ya mabara .75rem ) 1.5rem (kwa kila barabara ya mabara .75rem )
Inayofanana Ndio Ndio Ndio Ndio Ndio Ndio
Kuagiza Ndio Ndio Ndio Ndio Ndio Ndio
Usaidizi wa mabara Ndio Ndio Ndio Ndio Ndio Ndio