断点

核心理念

¥Core concepts

• 断点是响应式设计的构建块。使用它们来控制布局何时可以适应特定视口或设备尺寸。

  ¥Breakpoints are the building blocks of responsive design. Use them to control when your layout can be adapted at a particular viewport or device size.

• 使用媒体查询通过断点构建 CSS。媒体查询是 CSS 的一项功能，允许你根据一组浏览器和操作系统参数有条件地应用样式。我们在媒体查询中最常使用 min-width。

  ¥Use media queries to architect your CSS by breakpoint. Media queries are a feature of CSS that allow you to conditionally apply styles based on a set of browser and operating system parameters. We most commonly use min-width in our media queries.

• 移动优先、响应式设计是我们的目标。Bootstrap 的 CSS 旨在应用最少的样式，使布局在最小的断点处工作，然后分层样式以调整较大设备的设计。这可以优化你的 CSS，缩短渲染时间，并为你的访问者提供出色的体验。

  ¥Mobile first, responsive design is the goal. Bootstrap’s CSS aims to apply the bare minimum of styles to make a layout work at the smallest breakpoint, and then layers on styles to adjust that design for larger devices. This optimizes your CSS, improves rendering time, and provides a great experience for your visitors.

可用断点

¥Available breakpoints

Bootstrap 包括六个默认断点，有时称为网格层，用于响应式构建。如果你使用我们的源 Sass 文件，则可以自定义这些断点。

¥Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized if you’re using our source Sass files.

选择每个断点是为了舒适地容纳宽度为 12 倍数的容器。断点还代表常见设备尺寸和视口尺寸的子集 - 它们并不专门针对每个用例或设备。相反，这些系列为几乎任何设备提供了强大且一致的基础。

¥Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don’t specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device.

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

¥These breakpoints are customizable via Sass—you’ll find them in a Sass map in our _variables.scss stylesheet.

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

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

¥For more information and examples on how to modify our Sass maps and variables, please refer to the CSS section of the Grid documentation.

媒体查询

¥Media queries

由于 Bootstrap 是为了移动优先而开发的，因此我们使用一些 媒体查询 为我们的布局和界面创建合理的断点。这些断点主要基于最小视口宽度，并允许我们在视口变化时放大元素。

¥Since Bootstrap is developed to be mobile first, we use a handful of media queries to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.

最小宽度

¥Min-width

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

¥Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.

// 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;
  }
}

这些 Sass mixins 使用 Sass 变量中声明的值在我们编译的 CSS 中进行翻译。例如：

¥These Sass mixins translate in our compiled CSS using the values declared in our Sass variables. For example:

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

最大宽度

¥Max-width

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

¥We occasionally use media queries that go in the other direction (the given screen size or smaller):

// No media query necessary for xs breakpoint as it's effectively `@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) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

这些 mixin 获取那些声明的断点，从中减去 .02px，并将它们用作我们的 max-width 值。例如：

¥These mixins take those declared breakpoints, subtract .02px from them, and use them as our max-width values. For example:

// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

单断点

¥Single breakpoint

还有媒体查询和混合，用于使用最小和最大断点宽度来定位屏幕尺寸的单段。

¥There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

@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) { ... } 将导致：

¥For example the @include media-breakpoint-only(md) { ... } will result in :

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

断点之间

¥Between breakpoints

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

¥Similarly, media queries may span multiple breakpoint widths:

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

结果是：

¥Which results in:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }