Bootstrap - 断点

本章将讨论 Bootstrap 断点。Bootstrap 断点帮助我们确定如何在各种设备和视口大小上查看响应式布局。

基本概念

Bootstrap 中的断点用于创建响应式设计。您可以在特定的视口或设备尺寸下调整它们。
CSS 媒体查询允许我们根据浏览器和操作系统参数自定义样式。Boostrap 中的媒体查询大多使用min-width来控制断点。
Bootstrap 的目标是移动优先、响应式设计。Bootstrap 使用最少的样式创建适合移动设备的布局，为更大的设备添加层。它缩短了渲染时间并为用户提供了更好的观看体验。

断点类型

Bootstrap 提供了六个默认断点，称为网格层。如果我们使用 Boostrap 的源 Sass 文件，则可以自定义这些。

断点	类中缀	方面
特小号	没有任何	<576像素
小的	SM	≥576像素
中等的	MD	≥768像素
大的	lg	≥992像素
特大号	XL	≥1200像素
特大特大号	xxl	≥1400像素

这些断点涵盖常见的设备尺寸和视口尺寸。这些引导断点可以使用 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 将应用于大于最小宽度的设备，即小型设备（横向手机，576 像素及以上）。

让我们通过一个例子来看看最小宽度媒体功能的用法。在这里你会看到我们在宽度小于 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意味着 CSS 仅应用于宽度小于媒体查询中提到的设备。

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

上面的语法意味着 CSS 将应用于大型设备（台式机，小于 1200px）。

让我们通过一个例子来看看最大宽度媒体功能的用法：

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!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) 和 (max-width: 1278px) { ... }，这意味着样式从中型设备开始应用到超大型设备。