如何在Bootstrap中使用网格断点类？

网格断点类是使用Bootstrap创建响应式网页设计的基本构建模块。这些类可以与任何Bootstrap类一起使用，以在文档中的不同屏幕尺寸或不同显示设备上为HTML元素指定特定的CSS样式。我们可以使用这些类在不同屏幕尺寸设备上隐藏或显示、更改元素的位置和对齐方式。这些类是使用CSS中的媒体查询(Media Query)来构建的，媒体查询用于为不同的显示设备创建响应式网页设计。

Bootstrap中可用于构建响应式网页设计的网格断点类如下所示：

xs - “xs”在这个类中代表 Extra Small ，意味着该类将为只有极小屏幕宽度设备定义特定的样式。
sm - “sm”表示 small ，它将为小屏幕宽度设备定义样式。
md - “md”是用于表示 medium 的缩写，它定义了中等屏幕尺寸设备的样式。
lg - “lg”在这个类中用于表示 large ，根据缩写的定义，它将对大屏幕设备应用定义好的样式。
xl - “xl”是最常用的表示 extra small 的缩写，它代表非常大的对象。同样，它用于对特别大的屏幕设备应用样式。
xxl - 就像xl表示extra large一样，xxl表示 extra extra large ，即用于非常大的屏幕设备，例如弯曲屏幕和大型PC屏幕。

这些断点类可以与任何Bootstrap类一起使用，以将该特定类的样式应用于特定屏幕尺寸上的元素，而不应用于其他屏幕尺寸或其他屏幕设备上的其他样式。

语法

下面的语法将向您展示如何使用Bootstrap网格断点类与Bootstrap的其他类配合使用：

<div class = "[any_Bootstrap_Classname] – [breakpoint class]">  </div>

下表将显示每个类别应用样式到一个元素时所需的最小屏幕宽度和一些类别的示例使用情况。

大小	Screen Width	Examples
xs	< 576px	col – 6
sm	>= 576px	px – sm – 3
md	>= 768px	my – md – 2
lg	>= 992px	d – lg – none
xl	>= 1200px	col – xl – 6
xxl	>= 1400px	d – xxl – flex

现在，让我们通过编码示例来讨论并理解它。

步骤

步骤1 - 在第一步中，我们将使用CDN或从官方网站下载bootstrap，并将其包含到我们的HTML文档中。
步骤2 - 在接下来的步骤中，我们将定义一些HTML元素，以在这些元素上实现bootstrap类。
步骤3 - 在这一步中，我们将为前一步中定义的元素分配不同的bootstrap类和断点类，并根据不同的屏幕宽度设备对它们的样式进行更改。

示例

下面的代码示例将说明如何使用不同的bootstrap类和断点类来更改不同屏幕尺寸的CSS。

<!DOCTYPE html>
<html>
<head>
   <link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet" ></head>
<body>
   <h2> Use grid-breakpoint class in Bootstrap </h2>
   <p> The size of each column in a particular row will change according to the device width. </p>
   <div class = "row">
      <div class = "col-12 col-md-6 col-lg-4"> Column - 01 </div>
      <div class = "col-12 col-md-6 col-lg-4"> Column - 02 </div>
      <div class = "col-12 col-md-6 col-lg-4"> Column - 03 </div>
      <div class = "col-12 col-md-6 col-lg-4"> Column - 04 </div>
      <div class = "col-12 col-md-6 col-lg-4"> Column - 05 </div>
      <div class = "col-12 col-md-6 col-lg-4"> Column - 06 </div>
   </div>
</body>
</html>

在上面的例子中，我们看到了在Bootstrap的 网格系统 类 row 和 col 中使用了Bootstrap的断点类来改变不同屏幕尺寸设备上列的宽度。这样，它们能够以良好的方式显示而不会异常。

让我们来看一个更多的代码示例，在这个示例中，我们将使用Bootstrap断点类与除了网格系统类之外的一些其他Bootstrap类。

例子

下面的例子将说明在Bootstrap的显示类中使用Bootstrap的断点类的用法。

<!DOCTYPE html>
<html>
<head>
   <link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet"></head>
<body>
   <h2> Using grid-breakpoint class in Bootstrap </h2>
   <p> The size of each column in a particular row will change according to the device width. </p>
   <div class = "row">
      <div class = "d-none text-center border mx-0 border-dark d-md-block d-lg-float">
         Display None in extra small screen devices
      </div>
      <div class = "d-block text-center border mx-0 border-dark d-md-none col-lg-4">
         Display None in small, medium, large, extra large and extra extra large screen devices
      </div>
      <div class = "text-center border mx-0 border-dark d-lg-none">
         Display None in large, extra large and extra extra large screen devices
      </div>
   </div>
</body>
</html>

在上面的示例中，我们使用了bootstrap的断点类与bootstrap的显示类，并根据不同屏幕宽度设备的需求来更改不同HTML元素的显示属性。

在本文中，我们学习了如何使用bootstrap的栅格断点类，并结合其他bootstrap类对它们进行实际实现，根据屏幕宽度改变它们的属性。我们讨论了如何使用这些类与其他类结合使用，并提供了代码示例。通过这种方式，我们可以使用bootstrap的栅格断点类与任何其他bootstrap类结合使用，根据设备屏幕宽度应用样式。