Bootstrap 简明教程

Bootstrap - Breakpoint

本章将讨论 Bootstrap 断点。Bootstrap 断点可以帮助我们确定响应式布局如何在不同的设备和视口大小上显示。

This chapter will discuss about Bootstrap breakpoints. Bootstrap breakpoints help us determine how a responsive layout is viewed on various devices and viewport sizes.

Basic concepts

  1. Breakpoints in Bootstrap are used to create responsive designs. You may adjust them at a particular viewport or device size.

  2. CSS media queries allow us to customize styling based on browsers and operating sytem parameters. Media queries in Boostrap mostly use min-width to control the breakpoints.

  3. Bootstrap’s goal is mobile-first, responsive designs. Bootstrap creates mobile-friendly layouts with minimal styles, adding layers for larger devices. It improves rendering time and gives users a better viewing experience.

Types of breakpoints

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

Bootstrap provides six default breakpoints referred to as grid tiers. These can be customized if we use Boostrap’s source Sass files.

Breakpoint

Class Infix

Dimensions

Extra small

None

<576px

Small

sm

≥576px

Medium

md

≥768px

Large

lg

≥992px

Extra large

xl

≥1200px

Extra extra large

xxl

≥1400px

这些断点涵盖了常见的设备尺寸和视口尺寸。这些引导断点可以使用 Sass 更改，如下所示：

These breakpoints cover common device sizes and viewport dimensions. These bootstrap breakpoints can be changed using Sass, as shown below:

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

Media queries

Bootstrap 旨在首先移动设备，因此使用 media queries 为其布局和界面创建明智的断点。最小视口宽度用于控制断点，这些断点会随着视口的变化而缩放元素。

Bootstrap is developed to be mobile first, hence media queries are used to create wise breakpoints for its layouts and interfaces. Minimum viewport widths are used to control breakpoints which scale up elements as viewport changes.

Min-width

min-width 媒体特性状态指定特定设备的最小屏幕宽度。在断点中设置 min-width 表示 CSS 仅应用于宽度大于设备最小宽度的设备。

min-width media feature state specifies the minimum screen width of a specific device. Setting min-width in the breakpoints means CSS is only applied to devices whose width is greater than min-width of the device.

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

上面的语法意味着将针对大于最小宽度的设备应用 CSS，即小型设备（横向手机，576px 及更高）。

The above syntax means that CSS would be applied for devices larger than the min-width i.e Small devices (landscape phones, 576px and up).

让我们通过一个示例来看 min-width 媒体特性的使用。在这里，您将看到我们应用了一个在设备宽度小于 768px 时隐藏 div 的功能。

Let us see usage of min-width media feature with an example. Here you will see that we apply hide a div on devices width less than 768px.

Example

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

You can edit and try running this code using *Edit & Run *option.

  <!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 Breakpoint

max-width 媒体特性指出特定设备的最大屏幕宽度。在断点中设置 max-width 表示 CSS 仅应用于媒体查询中提到的宽度小于其宽度的设备。

max-width media feature states the maximum screen width of a specific device. Setting max-width in the breakpoints means CSS is only applied to devices whose width is smaller than mentioned in the media query.

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

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

The above syntax means that CSS would be applied to large devices (desktops, less than 1200px).

让我们通过一个示例来看 max-width 媒体特性的使用：

Let us see usage of max-width media feature with an example:

Example

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

You can edit and try running this code using *Edit & Run *option.

<!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>

Single Breakpoint

单个断点意味着在媒体查询中使用最小和最大断点宽度来定位特定屏幕尺寸。

Single breakpoint means targeting a specific screen sizes using minimum and maximum breakpoint widths in media queries.

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

上面的语法意味着将针对具有介于 @media (min-width: 768px) 和 (max-width: 991.98px) { …​ }（即平板电脑、台式机等中等大小设备）之间的屏幕尺寸的设备应用 CSS。

The above syntax means that CSS would be applied for devices with screen sizes between @media (min-width: 768px) and (max-width: 991.98px) { …​ } (i.e medium sized devices such as tablets, desktops)

Between Breakpoints

在断点之间定位多个断点。

Between breakpoints target multiple breakpoints.

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

上面的语法生成 @media (min-width: 892px) 和 (max-width: 1278px) { …​ }，这意味着样式从中等设备开始应用，直到超大设备。

Above syntax results in @media (min-width: 892px) and (max-width: 1278px) { …​ }, which means styles are applied starting from medium devices and up to extra large devices.