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

容器

容器是Bootstrap中最基本的布局元素，在使用Bootstrap网格系统的必备之器。你可以选择一个响应式的、固定宽度的容器（意味着其max-width在每个尺寸断点处变化），或者灵活宽度的容器（意味着它总是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) { ... }
复制代码

Bootstrap的CSS源代码都是用Sass写的，所以所有的媒体查询都支持Sass的mixin：

// 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;
  }
}
复制代码

我们会酌情max-width来界定媒体查询：

//  极小设备(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的断点没有上限，故没有媒体查询
复制代码

注意，当前浏览器不支持range context queries，所以我们在处理min-和max-前缀以及宽度为分数的视口（例如在高dpi设备上可能导致不确定条件）时，使用更高精度的值来进行比较。

在说一次，媒体查询也支持Sass的mixin。

也可以使用最大最小断点宽度的媒体查询和mixin来指定某个范围的屏幕尺寸。

//  极小设备(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) { ... }
复制代码

对应的Sassmixin则是：

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

Z-index

多个Bootstrap组件都用到了z-index——通过提供第三个坐标来帮你控制布局的CSS属性。在Bootstrap中用的默认z-index范围来给navigation、tooltip、popover、modal等等分层。

这些数值可以始于任意数字，足够大、足够特殊，用以完美避免冲突。我们需要对分层组件进行标准的设置，这样才能在表现上达到合理一致。所以没有理由不去用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;
复制代码

为了处理组件间重叠的border（例如input组中的input和button），我们对默认、鼠标悬停、活动状态使用较小的个位数1、2、3。在这些状态下，我们把某个特定元素放在最前面，来显示它们的border。