概览

布置Bootstrap项目的组件和选项,包括包装容器,强大的网格系统,灵活的媒体对象和响应通用程序类。

容器(Containers)

容器(Containers)是Bootstrap中最基本的布局元素,并且使用我们的默认网格系统时。 容器(Containers)用于在其中容纳,填充和(有时)使内容居中。 虽然可以*嵌套容器,但是大多数布局不需要嵌套容器。

Bootstrap带有三个不同的容器(Containers):

  • .container, 它在每个响应断点处设置一个“最大宽度” max-width
  • .container-fluid, 在所有断点处都是“宽度:100%” width: 100%
  • .container-{breakpoint}, 即“ width:100%”,直到指定的断点为止

下表说明了每个容器的“最大宽度”与每个断点处的原始“ .container”和“ .container-fluid”的比较。

在实际操作中查看它们,并在我们的 Grid example中进行比较。

Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥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类是一个响应的,固定宽度的容器,这意味着它的“ max-width”在每个断点处都会改变。

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

流体(Fluid)

对整个宽度的容器使用.container-fluid,跨越视口的整个宽度。

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

响应式(Responsive)

响应式容器是Bootstrap v4.4中的新增功能。 它们允许您指定一个100%宽的类,直到达到指定的断点为止,之后我们对每个较高的断点应用max-width。 例如,.container-sm的宽度为100%,直到达到sm断点为止,它将以mdlgxl扩展。

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

响应式断点(breakpoints)

由于Bootstrap首先开发为移动设备,因此我们使用了少数media queries 为布局创建合理的断点 和界面。 这些断点主要基于最小视口宽度,并允许我们随着视口的变化按比例放大元素。

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

Note that since browsers do not currently support range context queries, we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.

Once again, these media queries are also available via 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: 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-index

一些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。 在悬停/焦点/活动(hover/focus/active)时,我们将具有较高“ z-index”值的特定元素带到最前沿,以显示其在同级元素上的边界。