資料結構
網路
關係資料庫管理系統 (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/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/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
