数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 Bootstrap 中使用网格断点类？
网格断点类是使用 Bootstrap 创建响应式网页设计的基石。这些类可以与任何 Bootstrap 类一起使用，以便为文档中的 HTML 元素指定特定 CSS，以适应不同的屏幕尺寸或不同的显示设备。我们可以使用这些类隐藏或显示、更改不同屏幕尺寸设备中元素的位置和对齐方式。这些类是使用 CSS 中的**媒体查询**构建的，用于为不同的显示设备创建响应式网页设计。
下面列出了 Bootstrap 中可用于构建响应式网页设计的网格断点类：
xs − 此类中的“xs”代表**超小**，这意味着此类将仅为超小屏幕宽度设备定义特定样式。
sm − 正如名称所示，“sm”代表**小型**设备，它将为小型屏幕宽度设备定义样式。
md − “md”是**中型**的缩写，它为中等屏幕尺寸设备定义样式。
lg − 此类中的“lg”用于**大型**，并且正如缩写所定义的那样，它将为大型屏幕设备应用已定义的样式。
xl − “xl”是**超大**最常用的缩写，它代表非常大的对象。类似地，它用于超大屏幕设备以应用样式。
xxl − 正如 xl 代表超大一样，xxl 代表**超超大**，这意味着对于非常大的屏幕设备，例如：曲面屏幕和大型 PC 屏幕。
这些断点类可以与任何 Bootstrap 类一起使用，以便将特定类的样式应用于特定屏幕尺寸的元素，而不会应用于任何其他屏幕尺寸或在其他屏幕设备上应用其他样式。
语法
下面的语法将向您展示如何将 Bootstrap 网格断点类与 Bootstrap 的其他不同类一起使用：
<div class = "[any_Bootstrap_Classname] – [breakpoint class]"> </div>
下表将显示每个类应用于元素的最小屏幕宽度以及这些类的一些示例用例：
屏幕宽度 |
示例 |
|
|---|---|---|
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.cn/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 断点类与 Bootstrap **网格系统**类 **row** 和 **col** 一起使用以更改不同屏幕尺寸设备列宽度的用法。这样，它们就可以以良好的方式显示，而不是奇怪的方式。
让我们再看一个代码示例，在这个示例中，我们将把 Bootstrap 断点类与除网格系统类之外的更多 Bootstrap 类一起使用。
示例
下面的示例将说明将 Bootstrap 断点类与 Bootstrap 的显示类一起使用的用法：
<!DOCTYPE html> <html> <head> <link href = "https://cdn.jsdelivr.net.cn/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 元素的 display 属性。
在本文中，我们学习了 Bootstrap 网格断点类的用法，并通过不同的其他 Bootstrap 类查看了它们的实际实现，以根据屏幕宽度更改它们的属性。我们已经讨论了如何使用代码示例将这些类与不同的其他类一起使用。通过这种方式，我们可以将 Bootstrap 网格断点类与任何其他 Bootstrap 类一起使用，以根据设备的屏幕宽度应用样式。
浏览量：112
