Bootstrap - 斷點

本章將討論 Bootstrap 斷點。Bootstrap 斷點幫助我們確定響應式佈局如何在各種裝置和視口尺寸上顯示。

基本概念

Bootstrap 中的斷點用於建立響應式設計。您可以在特定視口或裝置尺寸下調整它們。
CSS 媒體查詢允許我們根據瀏覽器和作業系統引數自定義樣式。Bootstrap 中的媒體查詢主要使用 min-width 來控制斷點。
Bootstrap 的目標是移動優先的響應式設計。Bootstrap 建立移動友好的佈局，使用最少的樣式，併為更大的裝置新增層級。它可以提高渲染速度，併為使用者提供更好的觀看體驗。

斷點型別

Bootstrap 提供六個預設斷點，稱為 網格層級。如果我們使用 Bootstrap 的 Sass 原始檔，可以自定義這些斷點。

斷點	類字尾	尺寸
超小	無	<576px
小	sm	≥576px
中	md	≥768px
大	lg	≥992px
超大	xl	≥1200px
特大	xxl	≥1400px

這些斷點涵蓋了常見的裝置尺寸和視口尺寸。這些 Bootstrap 斷點可以使用 Sass 進行更改，如下所示

  $grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px
  );

媒體查詢

Bootstrap 是以移動優先的方式開發的，因此使用媒體查詢為其佈局和介面建立明智的斷點。最小視口寬度用於控制斷點，這些斷點會在視口更改時縮放元素。

最小寬度

min-width 媒體特徵狀態指定特定裝置的最小螢幕寬度。在斷點中設定 min-width 意味著 CSS 僅應用於寬度大於裝置 min-width 的裝置。

  @include media-breakpoint-up(sm) { ... }

上述語法表示 CSS 將應用於大於 min-width 的裝置，即小型裝置（橫向手機，576px 及以上）。

讓我們看一個 min-width 媒體特徵的用法示例。在這裡，您將看到我們在寬度小於 768px 的裝置上隱藏了一個 div。

示例

您可以使用 編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Breakpoint</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
  <style>
  .custom-class {
    display: none;
  }
  @media (min-width: 768px) {
    .custom-class {
      display: block;
    }
  @media (min-width: 768px) {
    .custom-class {
      display: block;
    }
  }
  </style>
  </head>
  <body>
    <h5>This block is visible on all devices</h5>
    <div class="container-fluid mt-2 ">
      <div class="row">
        <div class="col-md-6 bg-warning p-3">
          md-6 warning
        </div>
      </div>
    </div><br>
    <h5>This block is not visible for sm breakpoint but visible for other breakpoints</h5>
    <div class="container-fluid mt-2 custom-class">
      <div class="row">
        <div class="col-md-6 bg-warning p-3">
          md-6 warning
        </div>
      </div>
    </div>
  </body>
  </html>

最大寬度斷點

max-width 媒體特徵狀態指定特定裝置的最大螢幕寬度。在斷點中設定 max-width 意味著 CSS 僅應用於寬度小於媒體查詢中提到的裝置。

  @include media-breakpoint-down(xl) { ... }

上述語法表示 CSS 將應用於大型裝置（桌面電腦，小於 1200px）。

讓我們看一個 max-width 媒體特徵的用法示例

示例

您可以使用 編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Breakpoint</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
<style>
.custom-class {
  display: none;
}
@media (max-width: 767.98px) {
  .custom-class {
    display: block;
  }
}
</style>
</head>
<body>

  <h5>This block visible on all devices</h5>
  <div class="container-fluid mt-2">
    <div class="row">
      <div class="col-xxl-3 bg-primary text-black p-3">
        xxl-3 primary
      </div>
    </div>
  </div>
  <h5>This block not visible all devices larger than sm</h5>
  <div class="container-fluid mt-2 custom-class">
    <div class="row">
      <div class="col-lg-6  bg-warning text-black p-3">
        lg-6 warning
      </div>
    </div>
  </div>
</body>
</html>

單個斷點

單個斷點意味著使用媒體查詢中的最小和最大斷點寬度來定位特定的螢幕尺寸。

  @include media-breakpoint-only(md) { ... }

上述語法表示 CSS 將應用於螢幕尺寸介於 @media (min-width: 768px) 和 (max-width: 991.98px) { ... } 之間的裝置（即中等尺寸裝置，如平板電腦、桌面電腦）。

斷點之間

斷點之間可以定位多個斷點。

  @include media-breakpoint-between(md, xl) { ... }

上述語法導致 @media (min-width: 892px) and (max-width: 1278px) { ... }，這意味著樣式從中等裝置開始應用，一直到超大型裝置。

列印頁面