学习Bootstrap 5的第二天

​​​​​​​

目录

前言 

网格系统

网格类

网格系统规则

网格的基本结构

网格选项

从堆叠到水平

自动布局列

超小型设备

超小型设备网格实例

自动布局列

小型设备

小型设备网格实例

自动布局列

中型设备

中型设备网格实例

自动布局列

大型设备

大型设备网格实例

自动布局列

超大型设备

超大型设备网格实例

自动布局列

超级大型设备

XXL 设备网格实例

网格实例

扩展


前言 

今天需要学习的是Bootstrap5 网格系统。

网格系统

Bootstrap 的网格系统是用 flexbox 构建的,提供了一个灵活的响应式布局系统,页面上最多允许 12 列,列会根据屏幕大小自动重新排列。

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

注意:请确保总和等于或小于 12(不需要使用所有 12 个可用列)。

网格类

Bootstrap 5的网格系统是基于断点的,这意味着在不同的屏幕尺寸和设备上,元素会根据指定的断点调整大小。

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

  • .col- 针对所有设备。
  • .col-sm- 平板 - 屏幕宽度等于或大于 576px。
  • .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px。
  • .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px。
  • .col-xl- 特大桌面显示器 - 屏幕宽度等于或大于 1200px。
  • .col-xxl- 超大桌面显示器 - 屏幕宽度等于或大于 1400px。

通过组合使用这些类,可以创建灵活的布局,适应不同的屏幕尺寸和设备类型。例如,可以为.col-sm-*和.col-md-*设置相同的宽度,这样在小型设备和中型设备上,元素将具有相同的宽度。

除了这些基本类,Bootstrap 5还提供了一些额外类,如.col-{breakpoint}-{size}(例如.col-sm-auto),用于更细粒度的控制和调整布局。

网格系统规则

  1. 网格需要放在设置了.container(固定宽度)或.container-fluid(全屏宽度)类的容器中,这是为了自动设置外边距和内边距,提供一致的布局。
  2. 使用.row类来创建水平的列组,并使用.col-*类来定义每一列的大小。(在Bootstrap中,".row"类用于创建网格布局的水平行,而".col-*"类用于定义行中的列。)
  3. 内容需要放置在列中,并且只有列可以是行的直接子节点。
  4. 预定义的类如.row和.col-sm-*可用于快速制作网格布局。
  5. 列通过填充创建列内容之间的间隙,这个间隙是通过.row类上的负边距设置第一行和最后一列的偏移。
  6. 网格列是通过跨越指定的12个列来创建。例如,设置三个相等的列,需要使用三个.col-sm-4来设置。
  7. Bootstrap 5使用flexbox(弹性盒子)而不是传统的浮动布局。flexbox的一大优势是,没有指定宽度的网格列,将自动设置为等宽与等高列。

网格的基本结构

以下是 Bootstrap 5 网格的基本结构:

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><style>.text-center {text-align: center;}</style><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container-fluid mt-3"><h1>基本网格结构</h1><p>请调整浏览器窗口大小来查看效果。</p><!-- 让 Bootstrap 自动处理布局 --><div class="row"><div class="col-sm bg-primary text-white text-center">25%</div><div class="col-sm bg-dark text-white text-center">25%</div><div class="col-sm bg-primary text-white text-center">25%</div><div class="col-sm bg-dark text-white text-center">25%</div></div><br><!-- 控制列宽,以及它们在不同设备上的显示方式 --><div class="row"><div class="col-sm-4 bg-primary text-white text-center">33.33%</div><div class="col-sm-4 bg-dark text-white text-center">33.33%</div><div class="col-sm-4 bg-primary text-white text-center">33.33%</div></div><br><!-- 控制列宽,以及它们在不同设备上的显示方式 --><div class="row"><div class="col-sm-6 bg-primary text-white text-center">50%</div><div class="col-sm-6 bg-dark text-white text-center">50%</div></div><br><!-- 让 Bootstrap 自动处理布局 --><div class="row"><div class="col-md bg-primary text-white text-center">100%</div></div></div></body>
</html>

运行结果:

注意:.bg-primary 和 .bg-dark 类用于设置列的背景颜色,而 .text-white 类则用于设置文本颜色为白色。 

  • 第一行使用.col-sm类来定义列,当屏幕宽度小于576px时,Bootstrap会自动处理布局,将列堆叠在一起。
  • 第二行使用.col-sm-4类来定义列,每个列占据4个单位(即1/3的行宽),无论屏幕大小如何,都保持这样的布局。
  • 第三行使用.col-sm-6类来定义列,每个列占据6个单位(即1/2的行宽),当屏幕宽度小于576px时,Bootstrap会自动处理布局,将列堆叠在一起。
  • 第四行使用.col-md类来定义列,当屏幕宽度大于或等于768px时,该列会占据整行的宽度。

网格选项

下表总结了 Bootstrap 5 网格系统如何在不同的屏幕尺寸上工作:

超小型 (<576px)小型 (>=576px)中型 (>=768px)大型 (>=992px)超大型 (>=1200px)特大型 (>=1400px)
类前缀.col-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-
网格行为始终水平折叠开始,在断点之上水平折叠开始,在断点之上水平折叠开始,在断点之上水平折叠开始,在断点之上水平折叠开始,在断点之上水平
容器宽度None (auto)540px720px960px1140px1320px
适用于手机竖屏手机横屏平板电脑笔记本电脑笔记本电脑和台式机笔记本电脑和台式机
列的 #121212121212
Gutter 宽度1.5rem (在列的每侧 .75rem )1.5rem (在列的每侧 .75rem )1.5rem (在列的每侧 .75rem )1.5rem (在列的每侧 .75rem )1.5rem (在列的每侧 .75rem )1.5rem (在列的每侧 .75rem )
可嵌套YesYesYesYesYesYes
偏移YesYesYesYesYesYes
列排序YesYesYesYesYesYes

从堆叠到水平

Bootstrap 5 的网格系统在实现从堆叠到水平转变方面与前几个版本有所不同。在 Bootstrap 5 中,网格系统的最小宽度(即堆叠到水平的阈值)被设置为 576px,而不是 Bootstrap 4 中的 768px。这意味着在屏幕宽度小于 576px 时,网格会从垂直堆叠变为水平排列。

以下是一个示例:

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container-fluid"><h1>网格实例</h1><p>本例展示了一个简单的“堆叠到水平”的两列布局,这意味着它会在所有屏幕上产生 50%/50% 的拆分,除了超小型屏幕,它会自动堆叠 (100%):</p><p>请调整浏览器窗口大小来查看效果。</p><div class="row"><div class="col-md-4 bg-primary text-center">Column 1</div><div class="col-md-4 bg-primary text-center">Column 2</div><div class="col-md-4 bg-primary text-center">Column 3</div></div></div></body>
</html>

在上面的代码中,我们使用了 .container-fluid 类来创建一个全宽度的容器,并在容器内创建了一个包含三个列的行。每个列都使用了 .col-md-4 类来指定其宽度,并使用 .bg-primary 和 .text-center 类来设置背景颜色和文本对齐方式。当屏幕宽度小于或等于 576px 时,这些列将从垂直堆叠变为水平排列。

自动布局列

在 Bootstrap 5 中,可以使用 col-* 类来创建自动布局的列。Bootstrap 5 的网格系统会自动根据屏幕大小调整列的宽度。要创建自动布局的列,需要使用 col-* 类,其中 * 是一个数字,表示该列的宽度比例。例如,col-3 表示该列的宽度是整个网格的 3/12,也就是 1/4。

下面是一个简单的示例代码,展示了如何使用 Bootstrap 5 创建自动布局的列:

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><div class="row"><div class="col-6 bg-primary text-white text-a p-3">1</div><div class="col-6 bg-dark text-white text-a p-3">2</div></div></div></body>
</html>

在上面的代码中,我们创建了一个包含两列的网格。每列都使用了 col-* 类来指定其宽度比例。col-6 表示该列的宽度是整个网格的 6/12,也就是 1/2。在大屏幕设备上(大于 576px),这两列会水平排列,形成一行。在小屏幕设备上(小于 576px),这两列会垂直堆叠。

超小型设备

超小型设备网格实例

XSmallSmallMediumLargeExtra LargeXXL
类前缀.col-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-
屏幕宽度<576px>=576px>=768px>=992px>=1200px>=1400px

以下是一个 Bootstrap 5 的超小型设备网格实例:

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container-fluid">  <div class="row">  <div class="col-1 bg-primary text-white">  <p>列 1</p>  </div>  <div class="col-1 bg-dark text-white">  <p>列 2</p>  </div>  </div>  </div></body>
</html>

在这个例子中,我们使用了 .container-fluid 类来创建一个全宽度的容器,然后使用 .row 类来创建一个行。在行内,我们使用 .col-1 类来创建两个等宽的列,它们分别占据了容器宽度的 1/12。我们还给这两个列添加了不同的背景颜色以示区分。

注意,在超小型设备上,这两个列会垂直堆叠,因为 Bootstrap 5 在超小型设备上默认会自动堆叠列。如果想要在超小型设备上水平显示这两个列,可以使用 .col-auto 类来代替 .col-* 类。

注意请确保总和等于或小于 12(不需要使用所有 12 个可用列):

对于 33.3% / 66.6% 的拆分,应使用 .col-4 和 .col-8(对于 50% / 50% 的拆分,您应使用 .col-6 和 .col-6)。

自动布局列

在 Bootstrap 5 中,有一种简单的方法可以为所有设备创建等宽的列:只需从 .col-* 中删除数字,并仅在 col 元素上使用 .col 类。 Bootstrap 将识别有多少列,并且每列将获得相同的宽度:

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><div class="row"><div class="col"><p>列 1</p></div><div class="col"><p>列 2</p></div><div class="col"><p>列 3</p></div></div></div></body>
</html>

在上面的代码中,我们使用了 .container 和 .row 类来创建一个容器和行,然后在行内使用了三个 .col 类来创建三个等宽的列。在 Bootstrap 5 中,当使用自动布局列时,每个列将自动获得相同的宽度,无论有多少列。

需要注意的是,自动布局列适用于 Bootstrap 5 的默认网格系统,即响应式网格系统。如果需要在不同设备上显示不同的列宽,建议使用 Bootstrap 5 的响应式布局功能,通过使用不同的类来指定不同设备的列宽。

小型设备

小型设备网格实例

XSmallSmallMediumLargeExtra LargeXXL
类前缀.col-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-
屏幕宽度<576px>=576px>=768px>=992px>=1200px>=1400px

对于小型设备,我们希望将列拆分 25% / 75%。小型设备被定义为屏幕宽度从 576 像素到 767 像素。对于小型设备,我们将使用 .col-sm-* 类。

我们将以下类添加到两列中:

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><div class="row"><div class="col-sm-6 bg-primary text-white"><p>列 1</p></div><div class="col-sm-6 bg-dark text-white"><p>列 2</p></div></div></div></body>
</html>

在这个例子中,我们使用了 .container 类来创建一个容器,然后使用 .row 类来创建一个行。在行内,我们使用 .col-sm-6 类来创建两个等宽的列,它们分别占据了容器宽度的 6/12。我们还给这两个列添加了不同的背景颜色以示区分。

注意,在小型设备上,这两个列会水平显示,因为 Bootstrap 5 在小型设备上默认使用水平网格布局。如果想要在小型设备上垂直显示这两个列,可以给容器添加 .flex-column 类或者将 .row 元素嵌套在另一个 .row 元素中。

自动布局列

在 Bootstrap 5 中,有一种简单的方法可以为所有设备创建等宽的列:只需从 .col-sm-* 中删除数字,并仅在 col 元素上使用 .col-sm 类。 Bootstrap 将识别有多少列,并且每列将获得相同的宽度。注意:如果屏幕尺寸小于 576px,列将水平堆叠。

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><div class="row"><div class="col-sm bg-primary text-white"><p>列 1</p></div><div class="col-sm bg-dark text-white"><p>列 2</p></div></div></div></body>
</html>

中型设备

中型设备网格实例

XSmallSmallMediumLargeExtra LargeXXL
类前缀.col-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-
屏幕宽度<576px>=576px>=768px>=992px>=1200px>=1400px

在中型设备上,50% / 50% 拆分的设计可能会更好。中型设备被定义为屏幕宽度从 768 像素到 991 像素。对于中型设备,我们将使用 .col-md-* 类:

<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>

 在小型设备上,请使用包含 -sm- 的类。在中型设备上,请使用包含 -md- 的类。

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><div class="row"><div class="col-md-6 bg-primary text-white"><p>列 1</p></div><div class="col-md-6 bg-dark text-white"><p>列 2</p></div></div></div></body>
</html>

在这个例子中,我们使用了 .container 类来创建一个容器,然后使用 .row 类来创建一个行。在行内,我们使用 .col-md-6 类来创建两个等宽的列,它们分别占据了容器宽度的 6/12。我们还给这两个列添加了不同的背景颜色以示区分。

注意,在 Bootstrap 5 中,中型设备的屏幕宽度是 768px,因此 .col-md-* 类的效果会在这个屏幕宽度以上生效。如果想要在更小的设备上实现类似的效果,可以将 .col-md-* 类改为 .col-* 类,或者使用响应式类 .col-{breakpoint}-*,其中 {breakpoint} 可以是 sm、md、lg 或 xl,分别对应小、中、大和超大型设备。

自动布局列

在 Bootstrap 5 中,有一种简单的方法可以为所有设备创建等宽的列:只需从 .col-md-* 中删除数字,并仅在 col 元素上使用 .col-md 类。 Bootstrap 将识别有多少列,并且每列将获得相同的宽度。

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><div class="row"><div class="col-md bg-primary text-white"><p>列 1</p></div><div class="col-md bg-dark text-white"><p>列 2</p></div></div></div></body>
</html>

大型设备

大型设备网格实例

XSmallSmallMediumLargeExtra LargeXXL
类前缀.col-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-
屏幕宽度<576px>=576px>=768px>=992px>=1200px>=1400px

在大型设备上,33% / 66% 的拆分设计可能会更好。大型设备被定义为屏幕宽度从 992 像素到 1199 像素。对于大型设备,我们将使用 .col-lg-* 类:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

在小型设备上,请使用包含 -sm- 的类。在中型设备上,请使用包含 -md- 的类。在大型设备上,请使用包含 -lg- 的类。

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><div class="row"><div class="col-lg-8 bg-primary text-white"><p>列 1</p></div><div class="col-lg-4 bg-dark text-white"><p>列 2</p></div></div></div></body>
</html>

在这个例子中,我们使用了 .container 类来创建一个容器,然后使用 .row 类来创建一个行。在行内,我们使用 .col-lg-8 和 .col-lg-4 类来创建两个不同宽度的列,它们分别占据了容器宽度的 8/12 和 4/12。我们还给这两个列添加了不同的背景颜色以示区分。

注意,在 Bootstrap 5 中,大型设备的屏幕宽度是 992px,因此 .col-lg-* 类的效果会在这个屏幕宽度以上生效。如果想要在更小的设备上实现类似的效果,可以将 .col-lg-* 类改为 .col-* 类,或者使用响应式类 .col-{breakpoint}-*,其中 {breakpoint} 可以是 sm、md、lg 或 xl,分别对应小、中、大和超大型设备。

自动布局列

在 Bootstrap 5 中,有一种简单的方法可以为所有设备创建等宽的列:只需从 .col-lg-* 中删除数字,并仅在 col 元素上使用 .col-lg 类。 Bootstrap 将识别有多少列,并且每列将获得相同的宽度。注意:如果屏幕尺寸小于 992px,列将水平堆叠。

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><div class="row"><div class="col-lg bg-primary text-white"><p>列 1</p></div><div class="col-lg bg-dark text-white"><p>列 2</p></div></div></div></body>
</html>

超大型设备

超大型设备网格实例

XSmallSmallMediumLargeExtra LargeXXL
类前缀.col-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-
屏幕宽度<576px>=576px>=768px>=992px>=1200px>=1400px

在 xlarge 设备上,20% / 80% 拆分的设计可能会更好。超大设备被定义为屏幕宽度为 1200 像素及以上。对于 xlarge 设备,我们将使用 .col-xl-* 类:

<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>
<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><div class="row"><div class="col-xl-3 bg-primary text-white"><p>列 1</p></div><div class="col-xl-9 bg-dark text-white"><p>列 2</p></div></div></div></body>
</html>

在这个例子中,我们使用了 .container 类来创建一个容器,然后使用 .row 类来创建一个行。在行内,我们使用 .col-xl-3 和 .col-xl-9 类来创建两个不同宽度的列,它们分别占据了容器宽度的 3/12 和 9/12。我们还给这两个列添加了不同的背景颜色以示区分。

注意,在 Bootstrap 5 中,超大型设备的屏幕宽度是 1200px,因此 .col-xl-* 类的效果会在这个屏幕宽度以上生效。如果想要在更小的设备上实现类似的效果,可以将 .col-xl-* 类改为 .col-* 类,或者使用响应式类 .col-{breakpoint}-*,其中 {breakpoint} 可以是 sm、md、lg 或 xl,分别对应小、中、大和超大型设备。

自动布局列

在 Bootstrap 5 中,有一种简单的方法可以为所有设备创建等宽的列:只需从 .col-xl-* 中删除数字,并仅在 col 元素上使用 .col-xl 类。 Bootstrap 将识别有多少列,并且每列将获得相同的宽度。注意:如果屏幕尺寸小于 1200px,列将水平堆叠。

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><div class="row"><div class="col-xl bg-primary text-white"><p>列 1</p></div><div class="col-xl bg-dark text-white"><p>列 2</p></div></div></div></body>
</html>

超级大型设备

XXL 设备网格实例

XSmallSmallMediumLargeExtra LargeXXL
类前缀.col-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-
屏幕宽度<576px>=576px>=768px>=992px>=1200px>=1400px
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 col-xxl-3">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 col-xxl-9">....</div>
<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container-fluid"><div class="row"><div class="col-xxl-6 bg-primary text-white"><p>列 1</p></div><div class="col-xxl-6 bg-dark text-white"><p>列 2</p></div></div></div></body>
</html>

在这个例子中,我们使用了 .container-fluid 类来创建一个全宽度的容器,然后使用 .row 类来创建一个行。在行内,我们使用 .col-xxl-6 类来创建两个等宽的列,它们分别占据了容器宽度的 50%。注意,这是在假设 XXL 设备的屏幕宽度是 1600px 的基础上设置的。

在实际应用中,由于 Bootstrap 5 的栅格系统是基于 CSS 的媒体查询构建的,因此 XXL 设备的具体断点取决于你的 CSS 配置。你可以在 CSS 文件中自定义断点的值,以适应你的 XXL 设备。

网格实例

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><!-- 容器 --><div class="container"><!-- 行 --><div class="row"><!-- 小型设备上的列 --><div class="col-12 bg-success text-white"><!-- 内容 --><p>这是适用于小型设备的列,占据了整个容器宽度。</p></div><!-- 小型设备上的列 --><div class="col-sm-6 bg-warning text-white"><!-- 内容 --><p>这是适用于小型设备的列,占据了容器宽度的 50%。</p></div><!-- 中型设备上的列 --><div class="col-md-4 bg-dark text-white"><!-- 内容 --><p>这是适用于中型设备的列,占据了容器宽度的 25%。</p></div><!-- 大型设备上的列 --><div class="col-lg-3 bg-primary text-white"><!-- 内容 --><p>这是适用于大型设备的列,占据了容器宽度的 12.5%。</p></div><!-- 超大型设备上的列 --><div class="col-xl-2 bg-dark text-white"><!-- 内容 --><p>这是适用于超大型设备的列,占据了容器宽度的 8.33%。</p></div><!-- 超大型设备上的列 --><div class="col-xxl-1 bg-primary text-white"><!-- 内容 --><p>这是适用于超大型设备的列,占据了容器宽度的 6.25%。</p></div></div></div></body>
</html>

扩展

无 gutter 指的是在 Bootstrap 栅格系统中,列与列之间没有水平方向的间隔。在默认情况下,Bootstrap 中的栅格系统会为每个列元素添加一个左右边距(gutter),以保持它们之间的间隔。但是,如果希望去除这些间隔,可以使用无 gutter 的样式。

  1. 如需更改列之间的间距(额外的空间),请使用任何 .g-1|2|3|4|5 类(.g-4 是默认值)。
  2. 如需完全删除装订线(gutter),请使用 .g-0。

实例:

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><div class="row g-0"><div class="col-4 bg-success text-white">教育部:要保障学生每天校内、校外各1个小时体育活动时间。教育部:要保障学生每天校内、校外各1个小时体育活动时间。教育部:要保障学生每天校内、校外各1个小时体育活动时间。</div><div class="col-4 bg-warning text-white">七部门:力争实现新能源汽车今年全年销量900万辆左右,同比增长约30%。七部门:力争实现新能源汽车今年全年销量900万辆左右,同比增长约30%。七部门:力争实现新能源汽车今年全年销量900万辆左右,同比增长约30%。</div><div class="col-4 bg-dark text-white">央行:自9月15日起,下调金融机构外汇存款准备金率2个百分点。央行:自9月15日起,下调金融机构外汇存款准备金率2个百分点。央行:自9月15日起,下调金融机构外汇存款准备金率2个百分点。</div></div></div></body>
</html>

运动结果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/116087.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【仿写spring之ioc篇】三、检查是否实现了Aware接口并且执行对应的方法

Aware接口 Aware接口中只是设置了对应的set方法&#xff0c;目前只定义了三个Aware 以BeanNameAware为例 package com.ez4sterben.spring.ioc.factory.aware;/*** bean名字清楚** author ez4sterben* date 2023/08/31*/ public interface BeanNameAware {/*** 设置beanName* …

stable diffusion实践操作-常见lora模型介绍

本文专门开一节写Lora相关的内容&#xff0c;在看之前&#xff0c;可以同步关注&#xff1a; stable diffusion实践操作 模型分两种&#xff0c;一种是sd大模型&#xff0c;一种是类似Lora的小模型 国内的是&#xff1a;https://www.liblibai.com 国外的是&#xff1a;https:/…

【kubernetes】Argo Rollouts -- k8s下的自动化蓝绿部署

蓝绿(Blue-Green)部署简介 在现代软件开发和交付中,确保应用程序的平稳更新和发布对于用户体验和业务连续性至关重要。蓝绿部署是一种备受推崇的部署策略,它允许开发团队在不影响用户的情况下,将新版本的应用程序引入生产环境。 蓝绿部署的核心思想在于维护两个独立的环…

Anaconda Prompt输入jupyter lab无反应

问题&#xff1a;Anaconda Prompt界面输入指令无反应 原因&#xff1a;公司电脑勒索病毒防御工具阻止了进程 解决&#xff1a;找到黑名单恢复进程

three.js(四):react + three.js

绘制多个立方体 1.搭建reactts 项目 npx create-react-app basics-demo --template typescriptreactts 的用法可参考此链接&#xff1a; https://react-typescript-cheatsheet.netlify.app/docs/basic/setup 2.安装three依赖 npm install three types/three --save3.安装路…

antd5:form组件底层封装库field-form-1.37.0启动

一开始node版本是18.16.0 npm install发现安装依赖成功 npm start发现启动出错 node:internal/crypto/hash:71this[kHandle] new _Hash(algorithm, xofLen);^Error: error:0308010C:digital envelope routines::unsupportedat new Hash (node:internal/crypto/hash:71:19)…

Git Bash 和 Git GUI中文汉化

目录 为什么要中文汉化&#xff1f;Git Bash的汉化Git GUI的汉化 为什么要中文汉化&#xff1f; 看到中文大概能猜出是什么意思&#xff0c;便于使用&#xff0c;特别是Git GUI&#xff0c;中文版的菜单很容易理解是要做什么&#xff0c;如下图&#xff1a; Git Bash的汉化 …

开箱报告,Simulink Toolbox库模块使用指南(五)——S-Fuction模块(C MEX S-Function)

文章目录 前言 C MEX S-Function 算法原理 原始信号创建 编写S函数 仿真验证 Tips 分析和应用 总结 前言 见《开箱报告&#xff0c;Simulink Toolbox库模块使用指南&#xff08;一&#xff09;——powergui模块》 见《开箱报告&#xff0c;Simulink Toolbox库模块使用…

Qt —UDP通信QUdpSocket 简介 +案例

1. UDP通信概述 UDP是无连接、不可靠、面向数据报&#xff08;datagram&#xff09;的协议&#xff0c;可以应用于对可靠性要求不高的场合。与TCP通信不同&#xff0c;UDP通信无需预先建立持久的socket连接&#xff0c;UDP每次发送数据报都需要指定目标地址和端口。 QUdpSocket…

CS144环境配置问题

使用wsl来做CS144实验&#xff0c;可能会在编译的时候遇到以下问题&#xff0c;很明显是找不到LIBPCAP&#xff0c;参考链接 使用sudo apt-get install libpcap-dev命令下载该库即可。 CMake Error: The following variables are used in this project, but they are set to N…

大数据HBase学习圣经:一本书实现HBase学习自由

学习目标&#xff1a;三栖合一架构师 本文是《大数据HBase学习圣经》 V1版本&#xff0c;是 《尼恩 大数据 面试宝典》姊妹篇。 这里特别说明一下&#xff1a;《尼恩 大数据 面试宝典》5个专题 PDF 自首次发布以来&#xff0c; 已经汇集了 好几百题&#xff0c;大量的大厂面试…

unity3d:功能验证,收集开源项目的工程合集

unity3d功能验证&#xff0c;和收集开源项目的工程合集 目录持续更新地址 【腾讯文档】UnityForTest目录 https://docs.qq.com/doc/DWm9HSkVhTGdyUUVo 源码 https://github.com/luoyikun/UnityForTest 动画 创建骨骼动画 BoneAnimation场景 代码创建Mesh&#xff0c;骨骼…

网络安全法+网络安全等级保护

网络安全法 2014年2月&#xff0c;中央网络安全和信息化领导小组成立&#xff0c;习主席当组长 2017年6月1日&#xff0c;网络安全法正式成立 网络安全是国家安全的重要组成部分没有网络安全就没有国家安全&#xff0c;没有信息化就没有现代化 网络安全法21条 网络安全法31条 …

使用Arrays.asList生成的List集合,操作add方法报错

早上到公司&#xff0c;刚到工位&#xff0c;测试同事就跑来说"功能不行了&#xff0c;报服务器异常了&#xff0c;咋回事";我一脸蒙&#xff0c;早饭都顾不上吃&#xff0c;要来了测试账号复现了一下&#xff0c;然后仔细观察测试服务器日志&#xff0c;发现报了一个…

Linux线程互斥

目录 一、线程不安全 1.线程不安全现象 2.线程不安全程序的特质 3.线程不安全程序的原因 二、线程互斥 1.基本概念 2.锁 &#xff08;1&#xff09;认识锁 &#xff08;2&#xff09;互斥锁的使用 &#xff08;3&#xff09;代码的改造 3.锁的本质 &#xff08;1&a…

达梦8 在CentOS 系统下静默安装

确认系统参数 [rootlocalhost ~]# ulimit -a core file size (blocks, -c) unlimited data seg size (kbytes, -d) unlimited【1048576(即 1GB)以上或 unlimited】 scheduling priority (-e) 0 file size (blocks, -f) unlimite…

多路波形发生器的控制

本次波形发生器&#xff0c;主要使用运算放大器、NE555以及一些其他的电阻电容器件来实现。整体电路图如下所示&#xff1a; 产生的三角波如下&#xff1a; 正弦波如下 方波如下&#xff1a; 运算放大器&#xff08;Operational Amplifier&#xff0c;简称OP-AMP&#xff09;是…

PSP - 蛋白质结构预测 OpenFold Multimer 重构训练模型的数据加载

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/132602155 OpenFold Multimer 在训练过程的数据加载时&#xff0c;需要将 MSA 与 Template 信息转换成 Feature&#xff0c;再进行训练&#xff0…

【数据结构回顾】

数据结构回顾 一、单链表二、单循环链表 一、单链表 #include <stdio.h> #include <stdlib.h>typedef struct Node {int data;Node *next; }Node;Node* initList() {Node *list (Node*)malloc(sizeof(Node));list->data 0;list->next NULL;return list; }…

【自用】西门子s7-200连接显示屏和物联网盒子完整配置过程

总览 1.PLC配置 2.显示屏配置 3.物联网盒子配置 一、PLC配置 1.连接PLC软件 STEP-7MicroWIN V4.0 SP9完整版 链接&#xff1a;https://pan.baidu.com/s/17LMEXnbkQZMPI8Bte24Eug?pwdjsi3 提取码&#xff1a;jsi3 2.PLC配置 打开 PLC 上面的小盖子&#xff0c;把红色按钮…