Bootstrap5之Breakpoint(断点) breakpoint set but not yet bound

在Bootstrap框架中，breakpoint是一个重要的概念，它定义了当浏览器窗口或屏幕的宽度小于或等于某个特定值时，某些CSS样式或JavaScript功能将开始生效或停止生效。Bootstrap提供了几个预定义的断点(Breakpoints · Bootstrap v5.3BootstrapGitHubTwitterOpen CollectiveBootstrap)，以便开发者可以根据不同的设备和屏幕大小来调整布局和样式。

Bootstrap 默认提供了六个主要断点：

1. xs (额外小)：这是最小的屏幕尺寸，通常小于576px。
2. sm (小)：当屏幕宽度在576px及以上时生效。
3. md (中)：从768px开始生效。
4. lg (大)：在992px及以上时启用。
5. xl (特大)：屏幕宽度超过1200px时的样式。
6. xxl（额外大）：Bootstrap 5新增的断点，在1400px及以上时生效。

在 Bootstrap 的网格系统中，这些断点用于控制行(row)和列(column)的堆叠与重排。开发者可以根据需要在这些断点处编写媒体查询（CSS @media queries），来实现自定义的响应式布局变化。

在 Bootstrap 中，你可以通过类名结合断点前缀（例如 .col-lg-、.col-md- 等）来控制元素在不同屏幕尺寸下的显示方式。以下是一个简单的网格系统示例：

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12 col-md-6 col-lg-3 text-bg-primary">
        这段文本将在不同的屏幕尺寸下改变其宽度。
      </div>
    </div>
  </div>

这段代码效果如下：

此外，你也可以使用媒体查询自定义样式，根据断点更改元素的CSS属性：

/* 0px<=视图宽度<200px时应用默认样式 */

/* 200px<=视图宽度<500px时应用该样式 */
@media (min-width: 200px) {
  .demo {
    color: goldenrod;
  }
}

/* 500px<=视图宽度<800px时应用该样式 */
@media (min-width: 500px) {
  .demo {
    color: greenyellow;
  }
}

/* 800px<=视图宽度时应用该样式 */
@media (min-width: 800px) {
  .demo {
    color: green;
  }
}

  <div class="demo">
    这段文本在不同屏幕尺寸下改变其颜色。
  </div>

演示效果如下：

通过使用断点，Bootstrap 让开发者能够轻松构建适应各种屏幕尺寸的设计，简化了响应式网页开发过程，并保证了跨设备的一致性和可用性。