断点（Breakpoints）

断点是可定制的宽度，它决定了在 Bootstrap 中响应式布局在不同设备或视口尺寸下的表现。

On this page

核心概念

断点是响应式设计的基石。 使用断点来控制在特定视口或设备尺寸下何时可以调整布局。
使用媒体查询按断点构建 CSS。 媒体查询是 CSS 的一项功能，可以根据一组浏览器和操作系统参数有条件地应用样式。我们在媒体查询中最常用的是 min-width。
移动优先，响应式设计是目标。 Bootstrap 的 CSS 旨在应用最少的样式，使布局在最小的断点上也能正常工作，然后再层层叠加样式，为更大的设备调整设计。这样可以优化 CSS，缩短渲染时间，为访客提供良好的体验。

可用断点

Bootstrap 包含六个默认的断点，有时称为 grid tiers，用于响应式构建。如果您使用我们的 Sass 源文件，可以自定义这些断点。

断点	类后缀	尺寸
超小（Extra small）	None	<576px
小号（Small）	`sm`	≥576px
中号（Medium）	`md`	≥768px
大号（Large）	`lg`	≥992px
特大号（Extra large）	`xl`	≥1200px
超大号（Extra extra large）	`xxl`	≥1400px

每个断点的宽度都是 12 的倍数。断点还代表了常见设备尺寸和视口尺寸的子集–它们并非专门针对每一种使用案例或设备。相反，这些范围为几乎所有设备提供了一个强大而一致的基础。

这些断点可通过 Sass 进行自定义–你可以在我们的 _variables.scss 样式表中的 Sass 映射中找到它们。

scss/_variables.scss

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

有关如何修改 Sass 映射和变量的更多信息和示例，请参阅网格文档的 CSS 部分.

媒体查询

由于 Bootstrap 以移动为先，因此我们使用一些 media queries来为布局和界面创建合理的断点。这些断点大多基于最小视口宽度，允许我们在视口发生变化时缩放元素。

最小宽度

Bootstrap 在我们的 Sass 源文件中主要使用以下媒体查询范围或断点来进行布局、网格系统和组件。

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

在编译 CSS 时，这些 Sass 混合元素会使用我们的 Sass 变量中声明的值进行转换。例如

// X 小型设备（纵向手机，小于 576px）
//  没有为 `xs` 设置媒体查询，因为这是 Bootstrap 的默认设置

// 小型设备（横向手机，576px 及以上）
@media (min-width: 576px) { ... }

// 中型设备（平板电脑，768px 及以上）
@media (min-width: 768px) { ... }

// 大型设备（台式机，992px 及以上）
@media (min-width: 992px) { ... }

// X-Large 大型设备（大型桌面，1200px 及以上）
@media (min-width: 1200px) { ... }

// XX-Large 设备（较大的台式机，1400px 及以上）
@media (min-width: 1400px) { ... }

最大宽度

我们偶尔也会使用反方向（给定屏幕尺寸_或更小）的媒体查询：

// xs 断点无需媒体查询，因为它实际上是 `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// 举例说明： 从中等断点向下的样式
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

这些混合脚本会使用这些已声明的断点，从中减去 .02px，然后将其用作我们的 max-width 值。例如

// `xs` 只返回规则集，不返回媒体查询
// ... { ... }

// `sm` 适用于 x-small 设备（纵向手机，小于 576px）
@media (max-width: 575.98px) { ... }

// `md`适用于小型设备（横向手机，小于 768px）
@media (max-width: 767.98px) { ... }

// `lg`适用于中型设备（平板电脑，小于 992px）。
@media (max-width: 991.98px) { ... }

// `xl` 适用于大型设备（台式机，小于 1200px）
@media (max-width: 1199.98px) { ... }

// `xxl` 适用于 x-large 设备（大型台式机，小于 1400px）。
@media (max-width: 1399.98px) { ... }

为什么要减去 0.02px？ 浏览器目前不支持范围上下文查询，因此我们通过使用精度更高的值来绕过min- 和 max- 前缀的限制以及小数宽度视口（例如，在高分辨率设备的某些条件下可能会出现这种情况）。

单个断点

此外，还有媒体查询和混合组件，可使用最小和最大断点宽度来针对单一屏幕尺寸。

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }

例如 @include media-breakpoint-only(md) { ... } 将导致：

@media (min-width: 768px) and (max-width: 991.98px) { ... }

在断点之间

同样，媒体查询可以跨越多个断点宽度：

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

结果：

// 示例
// 从中型设备到超大型设备都可应用样式
@media (min-width: 768px) and (max-width: 1199.98px) { ... }