概述

用于布局 Bootstrap 项目的组件和选项，包括包装容器、强大的网格系统、灵活的媒体对象和响应式实用工具类。

容器

容器是 Bootstrap 中最基本的布局元素，并且 在使用我们的默认网格系统时是必需的。容器用于包含、填充和（有时）居中其内部的内容。虽然容器可以嵌套，但大多数布局不需要嵌套容器。

Bootstrap 附带三个不同的容器

.container，在每个响应式断点处设置 max-width
.container-fluid，在所有断点处均为 width: 100%
.container-{breakpoint}，在指定断点之前均为 width: 100%

下表说明了每个容器的 max-width 与原始 .container 和 .container-fluid 在每个断点处的比较情况。

在我们的网格示例中查看它们并进行比较。

	特小 <576px	小 ≥576px	中 ≥768px	大 ≥992px	特大 ≥1200px
`.container`	100%	540px	720px	960px	1140px
`.container-sm`	100%	540px	720px	960px	1140px
`.container-md`	100%	100%	720px	960px	1140px
`.container-lg`	100%	100%	100%	960px	1140px
`.container-xl`	100%	100%	100%	100%	1140px
`.container-fluid`	100%	100%	100%	100%	100%

一体化

我们的默认 .container 类是一个响应式、固定宽度容器，这意味着它的 max-width 在每个断点处都会改变。

<div class="container">
  <!-- Content here -->
</div>

流体

使用 .container-fluid 来获得一个全宽容器，跨越视口的整个宽度。

<div class="container-fluid">
  ...
</div>

响应式

响应式容器在 Bootstrap v4.4 中是新的。它们允许你指定一个类，该类在达到指定断点之前为 100% 宽度，之后我们为每个较高的断点应用 max-width。例如，.container-sm 在开始时为 100% 宽度，直到达到 sm 断点，之后它将使用 md、lg 和 xl 进行扩展。

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

响应式断点

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

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

// Extra 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) { ... }

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

由于我们在 Sass 中编写源 CSS，因此所有媒体查询都可通过 Sass 混合使用

// 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) { ... }

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

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

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

请注意，由于浏览器当前不支持范围上下文查询，因此我们通过使用具有更高精度的值来解决 min- 和 max- 前缀和视口具有分数宽度（例如，在高 dpi 设备上的某些条件下可能会出现这种情况）的限制，从而进行比较。

同样，这些媒体查询也可通过 Sass 混合使用

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

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

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

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

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

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

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

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

这些媒体查询也可通过 Sass 混合使用

@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) { ... }

类似地，媒体查询可以跨越多个断点宽度

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

用于定位相同屏幕尺寸范围的 Sass 混合将是

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

Z 轴索引

多个 Bootstrap 组件使用 `z-index`，这是一个 CSS 属性，通过提供第三个轴来排列内容，帮助控制布局。我们在 Bootstrap 中使用默认的 z-index 范围，该范围经过设计，可以正确地分层导航、工具提示和弹出框、模态框等。

这些较高的值从一个任意数字开始，该数字足够高且具体，以理想地避免冲突。我们需要在我们的分层组件（工具提示、弹出框、导航栏、下拉菜单、模态框）中使用这些数字的标准集，以便我们在行为上保持合理的一致性。我们完全可以使用 `100`+ 或 `500`+，而没有理由。

我们不鼓励自定义这些单个值；如果你更改了一个值，你可能需要更改所有值。

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

为了处理组件内重叠的边框（例如，输入组中的按钮和输入），我们对默认、悬停和活动状态使用低个位数的 `z-index` 值 `1`、`2` 和 `3`。在悬停/焦点/活动时，我们使用较高的 `z-index` 值将特定元素带到最前面，以显示它们的边框位于同级元素之上。