Bootstrap 简明教程

Bootstrap - Utilities

本章将讨论 Bootstrap 实用程序。多种实用程序类用于进行各种更改，例如显示、隐藏、对齐和间距内容，这些用于创建适合移动设备并响应式的网站。

Changing display

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

Flexbox options

  1. Bootstrap 使用 flexbox，但并非每个元素都应 display:flex ，以避免覆盖和更改浏览器行为。大多数 components 都内建启用 flexbox。

  2. 若要将 display: flex 添加到元素，请使用 .d-flex 或响应式变体（如 .d-sm-flex ）。使用此类或值来访问 flexbox utilities 以进行调整大小、对齐、间距等。

Margin and padding

  1. 使用 margin 和 padding 实用程序来修改元素的间距和大小。它具有基于 1rem 默认 $spacer 变量的 six-level 间距范围。

  2. 你可以选择某些视口（例如，从 sm 断点开始的 .me-sm-3 的 margin-right: 1rem —在 LTR 中），或视口的数值（例如，LTR 中 margin-right: 1rem 的 .me-3 ）。

Toggle visibility

Visibility utilities 允许你切换元素的可见性。不可见的元素仍会影响页面布局，但对访问者隐藏。