概述

Bootstrap包含了一些供你的项目使用的组件和选项，包括外包裹容器、强大的网格系统、灵活多变的媒体对象和响应式的工具类。

Container容器

Container容器是窗口布局的最基本元素，我们推荐所有样式都定义在.container或.container-fluid容器之中-- 这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大合法宽度的窗口（意味着任何时候它的宽度总是100%）。

Bootstrap原生带三种container宽度规范：

.container, 居中，适配不同的断的 max-width 尺寸。
.container-fluid, 全屏，适配屏幕的 width: 100% 尺寸。
.container-{断点规格}（见下表，如.container-sm), 在指定规格断上width: 100% 尺寸。

下在的表格描述了 container在不同的屏幕的 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%

All-in-one（一个容器中定义）

默认的.container class 是一个响应式容器，它有固定宽度和最max-width 设置，并支持响应式断点，你应该用它作为整个DIV的最外层容器，如下。

<div class="container">
  <!-- 网页内容写在这里面 -->
</div>

流式布局

.container-fluid 则支持全屏的流式布局，如下使用：

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

响应式外部容器

Bootstrap v4.5带来了一组全新的响应式外部容器，它允许在指定的屏幕下定义 100%宽（这更适合移动等场景-译者注） max-width属性会在不断的断点有表现不同，比如.container-sm 则只在sm屏幕下显示100%宽,其它断点包括.container-md、 .container-lg、 .containerxl，代码示任免：

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

.container容器可以被嵌套，但是大多数布局并不需要这么做（最少层次的嵌套构建出的网页更优雅-译者注），其呈现效果和使用方法如下所示：

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

使用 .container-fluid 类，可以使div宽度扩展到整个宽度（如果没有被其它CSS容器包含，则应是浏览器运行时的宽度，否则应是父容器中允许的最大宽度，一般视为100%宽度），示例效果和代码使用方法如下：

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

响应式的断点

Bootstrap是基于移动优先的原则开发的，使用了一系列的媒体查询（media queries ）方法，为我们的布局和界面创建自适应的的分界点。这些分界点主要是基于视口宽度的最小值，并且当窗口视图改变的时候允许元素缩放。

在Bootstrap的源Sass文件中，为了实现布局、网格系统以及组件，首先使用下面的媒体查询范围(可以理解为将不同宽度的网页进行拆分并分别载入CSS样式处理构建）：

// Extra small devices (portrait phones, less than 576px)
    // No media query 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 mixins都是可用的（SASS的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) { ... }

// 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 mixins也是可用的：:

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

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

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

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

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

这样媒体查询同理可通过Sass mixins获得：

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

针对同一屏幕尺寸范围的Sass mixin将是如下定义方法：

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

Z-index 堆叠顺序属性

若干个Bootstrap组件利用z-indexCSS属性，通过提供第三轴来安排内容来帮助控制布局。我们在Bootstrap中使用默认的z-index量表，该缩放比例设计用于正确地分层导航、工具提示、扩展插件、模态框等场合。

一般情况下，不推荐用户去自定义这些属性，否则可能牵一发而动全，影响全响呈现。以下为BootStrap系统内置的Z-index堆叠顺序属性清单：

      $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;

    

为了处理组件内的重叠边界（例如，输入组中的按钮和输入），我们使用1,2和3的低单位数z-index值来表示默认，悬停和活动状态。在悬停/焦点/活动时，我们将一个特定元素带到最前面，使用更高的z-index值来显示它们在兄弟元素上的边界。