概述
用于布置 Bootstrap 项目的组件和选项,包括包装容器、强大的网格系统、灵活的媒体对象和响应式实用程序类。
容器
容器是 Bootstrap 中最基本的布局元素,在使用我们默认的网格系统时是必需的。容器用于包含、填充和(有时)将内容居中。虽然容器可以嵌套,但大多数布局不需要嵌套容器。
Bootstrap 带有三个不同的容器:
.container
,它max-width
在每个响应断点处设置 a.container-fluid
,width: 100%
在所有断点处.container-{breakpoint}
,width: 100%
直到指定断点
下表说明了每个容器max-width
与原始容器的比较.container
以及.container-fluid
跨每个断点的比较。
在我们的Grid 示例中查看它们并进行比较。
超小 <576px |
小 ≥576px |
中 ≥768px |
大 ≥992px |
特大 ≥1200px |
|
---|---|---|---|---|---|
.container |
100% | 540像素 | 720像素 | 960像素 | 1140像素 |
.container-sm |
100% | 540像素 | 720像素 | 960像素 | 1140像素 |
.container-md |
100% | 100% | 720像素 | 960像素 | 1140像素 |
.container-lg |
100% | 100% | 100% | 960像素 | 1140像素 |
.container-xl |
100% | 100% | 100% | 100% | 1140像素 |
.container-fluid |
100% | 100% | 100% | 100% | 100% |
一体
我们的默认.container
类是一个响应式、固定宽度的容器,这意味着它max-width
在每个断点处都会发生变化。
<div class="container">
<!-- Content here -->
</div>
体液
用于.container-fluid
全宽容器,跨越视口的整个宽度。
<div class="container-fluid">
...
</div>
响应式
响应式容器是 Bootstrap v4.4 中的新功能。它们允许您指定一个 100% 宽的类,直到达到指定的断点,之后我们max-width
为每个更高的断点应用 s。例如,在到达断点.container-sm
之前是 100% 宽,在断点处将使用、和sm
放大。md
lg
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
同样,这些媒体查询也可以通过 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指数
几个 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
来表示默认、悬停和活动状态。在悬停/聚焦/激活时,我们将具有更高z-index
值的特定元素置于最前面,以在兄弟元素上显示它们的边框。