实用程序
为了更快地进行移动友好和响应式开发,Bootstrap 包含数十个用于显示、隐藏、对齐和间隔内容的实用程序类。
改变显示属性
使用我们的 显示实用程序 来响应切换显示属性的常用值。将其与我们的网格系统、内容或组件混合,以在特定视口中显示或隐藏它们。
弹性盒选项
Bootstrap 是使用 flexbox
构建的,但并非每个元素的显示都已更改为 display: flex
,因为这会添加许多不必要的覆盖并意外更改关键浏览器行为。我们的大多数组件都是在启用 flexbox
的情况下构建的。
如果您需要将 display: flex
添加到元素,请使用 .d-flex
或响应式变体之一(例如 .d-sm-flex
)。您将需要此类或显示值,以允许使用我们额外的 flexbox
实用程序来调整大小、对齐、间距等。
边距和填充
使用边距和填充间距实用程序来控制元素和组件的间距和大小。 Bootstrap 基于 1rem
值默认 $spacer
变量包括六级间距实用程序。为所有视口选择值(例如,.me-3
用于 margin-right: 1rem
在 LTR),或选择响应式变体以定位特定视口(例如,.me-md-3
用于 margin-right:1rem
— 在 LTR — 开始在 md 拐点)。
切换可见性
当不需要切换显示时,您可以使用我们的可见性实用程序来切换元素的可见性。不可见的元素仍然会影响页面的布局,但在视觉上对访问者是隐藏的。