Bootstrap布局

Bootstrap提供了用于布局项目的组件和选项，包括包装容器、强大的网格系统、灵活的媒体对象以及响应式实用程序类。这些功能使开发者能够轻松创建具有响应式布局和灵活排版的网站和应用程序。

一、器皿

容器是 Bootstrap 中最基本的布局元素，使用默认网格系统时必不可少。容器用于包裹、填充和有时居中内容。虽然容器可以嵌套，但大多数布局不需要这样做。

Bootstrap提供了三种不同类型的容器：

1、.container，在每个响应式断点处设置max-width；

2、.container-fluid，这是在所有断点处width: 100%；

3、.container-{breakpoint}，直到指定的断点width: 100%。

下表说明了每个容器与原始容器以及每个断点的比较情况

二、多合一

Bootstrap中用于创建响应式、固定宽度容器的默认类，即.container，该容器会在每个断点下自动调整大小。示例代码如下：

<div class="container">
<!-- 内容在这里 -->
</div>

使用这种方式可以轻松地创建具有响应性布局的网页内容。

三、响应式布局

响应式容器是 Bootstrap v4.4 中的新增功能。这些容器允许指定一个 100% 宽度的类，直到达到指定的断点，然后将根据每个更高断点应用不同的类。例如，在达到断点之前，容器的宽度为100%，之后将会使用.container-sm、.container-md、.container-lg和.container-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 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

注意：由于浏览器目前不支持范围上下文查询，因此我们通过使用具有更高精度的值进行这些比较，解决了最小和最大前缀以及具有小数宽度的视口的限制（例如，在高 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;
}
}

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

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

针对相同屏幕尺寸范围的 Sass mixin 为：

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

五、Z指数

Bootstrap 中的一些组件利用 CSS 属性 z-index，该属性通过提供第三个轴来排列内容来帮助控制布局。在 Bootstrap 中，我们使用了默认的 z 索引比例，这个比例旨在正确分层导航、工具提示和弹出框、模态图等组件。

这些较高的值从任意数字开始，足够高且具体，理想情况下可以避免冲突。我们需要在分层组件（如工具提示、弹出框、导航栏、下拉列表、模态框）中设置一组标准化的 z-index 值，以便在行为上保持合理的一致性。我们建议采用 + 或 +100 为间隔。

不建议自定义这些 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;

为了处理组件（例如，输入组中的按钮和输入）中的重叠边框，我们在 Bootstrap 中使用低个位数值的 z-index，比如 1、2 和 3，以及默认、悬停和活动状态。在悬停、聚焦或活动时，我们将具有更高值的特定元素放在最前面，以确保它们在同级元素上显示边框。