Bootstrap 入门：容器、响应式断点、Z-index

Containers

容器是 Bootstrap 中最基本的布局元素，对于使用 Bootstrap 的网格系统至关重要。您可以选择响应式固定宽度容器（意味着 最大宽度 在每个大小断点处发生变化），或灵活宽度容器（意味着它始终为 100% 宽）。

虽然容器可以嵌套，但对于大多数布局来说，嵌套容器是不必要的。

<div class="container">
  <!-- Content here -->
</div>
复制代码

使用 .container-fluid 获得宽度为 100%、跨越视口整个宽度的容器。

<div class="container-fluid">
  <!-- Content here -->
</div>
复制代码

响应式断点

由于 Bootstrap 是移动优先，因此我们使用多个媒体查询来为布局和界面创建足够的断点。大多数断点都基于最小视口宽度，允许我们使用视口缩放元素。

在布局、网格系统和组件的Sass文件中，Bootstrap主要使用如下所示的媒体查询范围——即断点。

// 极小设备(portrait phones,小于576px)
// 没有“xs”对应的媒体查询，因为它在Bootstrap中是默认的。

// 小型设备(landscape phones, 576px及以上)
@media (min-width: 576px) { ... }

// 中型设备(tablets, 768px及以上)
@media (min-width: 768px) { ... }

// 大型设备(desktops, 992px及以上)
@media (min-width: 992px) { ... }

// 超大设备(large desktops, 1200px及以上)
@media (min-width: 1200px) { ... }
复制代码

CSS Bootstrap 源代码是用 Sass 编写的，因此所有媒体查询都支持 Sass 混合：

// xs断点不需要媒体查询 
//因为它在`@media (min-width: 0) { ... }`有效
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// 例子：从 `min-width: 0`开始是隐藏的,
//从`sm` 断点开始就显示出来了
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}
复制代码

我们将使用最大宽度来确定适当的媒体查询：

//  极小设备(portrait phones,小于576px)
@media (max-width: 575.98px) { ... }

//小型设备(landscape phones, 小于768px)
@media (max-width: 767.98px) { ... }

//  中型设备(tablets, 小于992px)
@media (max-width: 991.98px) { ... }

// 大型设备(desktops, 小于1200px)
@media (max-width: 1199.98px) { ... }

// 超大设备(large desktops)
// 因为xl的断点没有上限，故没有媒体查询
复制代码

请注意，当前浏览器不支持范围上下文。查询，因此我们在处理最小和最大前缀以及具有分数宽度的视口时使用更高的精度值进行比较（例如，在可能导致不确定情况的高 dpi 设备上）。

这一次，媒体查询也支持 Sass 混合。

您还可以使用媒体查询和混合最大和最小断点宽度来指定多个屏幕尺寸。

//  极小设备(portrait phones,小于576px)
@media (max-width: 575.98px) { ... }

//小型设备(landscape phones, 576px到768px以左)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

//  中型设备(tablets, 768px到992px以左)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// 大型设备(desktops, 992px到1200px以左)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// 超大设备(large desktops，1200px及以上)
@media (min-width: 1200px) { ... }
复制代码

同样，媒体查询可以传递多个断点：

//例子
// 对中型到超大型范围的设备应用样式
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
复制代码

Sass 组件mixin 是：

@include media-breakpoint-between(md, xl) { ... }
复制代码

组件ltiZ-index ♶ 使用索引-z - 一个 CSS 属性，可帮助您通过提供第三个坐标来控制布局。 Bootstrap 中用于覆盖导航、工具提示、弹出窗口、模式等的默认 z 索引范围。

该值可以以任何数字开头，足够大，并且足够特殊，以完美防止冲突。我们需要分层组件的标准设置，以便获得相当一致的性能。所以没有理由不使用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;
复制代码

为了处理组件之间的重叠边界（例如输入组中的输入和按钮），我们使用较小的单位数字 1、2 和 3 来表示默认、鼠标悬停和活动状态。在这些国家，我们将某些元素放在前面以显示边界。

作者：?Badd
来源：掘金