Bootstrap - 实用工具

本章将讨论 Bootstrap 实用工具。许多实用工具类用于各种更改，例如显示、隐藏、对齐和内容间距，这些用于创建移动友好型和响应式网站。

更改显示

Bootstrap 显示属性 可用于配置显示。将其与网格系统、内容或组件混合使用，以便在特定视口中显示或隐藏它们。

Flexbox 选项

• Bootstrap 使用 Flexbox，但并非每个元素都应设置为 display: flex 以避免覆盖和更改浏览器行为。大多数组件都启用了 Flexbox。

• 要向元素添加 display: flex，请使用 .d-flex 或响应式变体（如 .d-sm-flex）。使用此类或值访问Flexbox 实用工具 以进行大小调整、对齐、间距等等。

边距和填充

• 使用 margin 和 padding 实用工具来修改元素的间距和大小。它具有六级间距比例的间距实用工具，基于默认 $spacer 变量的 1rem。

• 您可以选择某些视口（例如，对于从 sm 断点开始的 LTR 中的 margin-right: 1rem，使用 .me-sm-3），或视口的数值（例如，对于 LTR 中的 margin-right: 1rem，使用 .me-3）。

切换可见性

可见性实用工具 允许您切换元素的可见性。不可见的元素继续影响页面布局，但对访问者隐藏。