概观

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

货柜

容器是Bootstrap中最基本的布局元素, 使用我们的默认网格系统时需要 。容器用于在其中容纳,填充和（有时）使内容居中。虽然容器 can 嵌套,大多数布局不需要嵌套容器。

Bootstrap带有三个不同的容器：

下表说明了每个容器的 max-width 比较原始 .container and .container-fluid 每个断点。

看到他们的实际行动,并在我们的系统中进行比较网格示例 .

	特小 <576px	小 ≥576px	介质 ≥768px	大 ≥992px	超大 ≥1200px
`.container`	100%	540像素	720px	960px	1140px
`.container-sm`	100%	540像素	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%

我们的默认 .container class是一个响应式,固定宽度的容器,表示其 max-width 在每个断点处更改。

Use .container-fluid 对于全角容器,它跨越视口的整个宽度。

响应容器是Bootstrap v4.4中的新增功能。它们允许您指定100％宽的类,直到达到指定的断点为止,之后我们应用 max-width 每个较高的断点。例如, .container-sm 的宽度是100％,直到 sm 达到断点,它将在此向上扩展 md,lg ,和 xl.

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

Bootstrap主要在源Sass文件中为布局,网格系统和组件使用以下媒体查询范围（或断点）。

由于我们使用Sass编写了源CSS,因此所有媒体查询都可以通过Sass mixins获得：

我们有时会使用其他方向的媒体查询（给定的屏幕尺寸 或更小 ):

请注意,由于浏览器当前不支持范围上下文查询 ,我们致力于解决以下限制 min- and max- 前缀通过使用精度更高的值进行这些比较,可以创建具有小数宽度的视口（例如,在某些条件下会出现在高dpi的设备上）。

同样,这些媒体查询也可以通过Sass mixins使用：

也有媒体查询和混合,用于使用最小和最大断点宽度来定位单个屏幕尺寸段。

这些媒体查询也可以通过Sass mixins使用：

同样,媒体查询可能跨越多个断点宽度：

用于定位相同屏幕尺寸范围的Sass mixin为：

一些Bootstrap组件利用 z-index ,这是CSS属性,它通过提供第三个轴来安排内容来帮助控制布局。我们在Bootstrap中使用默认的z-index比例尺,该比例尺旨在适当地对导航,工具提示和弹出窗口,模态等进行分层。

这些较高的值以任意数字开始,该数字足够高且特定,足以理想地避免冲突。我们需要在我们的分层组件（工具提示,弹出窗口,导航栏,下拉菜单,模式）中使用一组标准的工具,以便我们在行为上可以合理地保持一致。没有理由我们不用 100 + or 500 +.

我们不鼓励定制这些单独的价值；如果您要更改一个,则可能需要全部更改。

要处理组件内的重叠边框（例如输入组中的按钮和输入）,我们使用低个位数 z-index 的值 1,2 ,和 3 默认,悬停和活动状态。在悬停/焦点/活动上,我们将特定元素以更高的 z-index 值以显示它们在同级元素上的边界。