Bootstrap5 实用工具

半兽人 发表于: 2020-07-27   最后更新时间: 2020-08-23  

布局实用工具

为了更快的移动友好和响应式开发,Bootstrap包含了几十个实用类,用于显示、隐藏、对齐和间隔内容。

更改 display

使用我们的显示实用程序可以快速切换display属性的常用值。将我们的网格系统、内容或组件混合,以便在特定的视口中显示或隐藏它们。

Flexbox选项

Bootstrap是用flexbox构建的,但并不是每个元素的显示都被改为了display: flex,因为这将增加许多不必要的覆盖,并可能会改变关键的浏览器行为。大多数我们的组件在构建时都启用了flexbox。

如果你需要将display: flex添加到元素中,请使用.d-flex或响应式变体之一(例如.d-sm-flex)。你需要这个类或显示值来允许使用我们额外的flexbox实用工具来调整大小、对齐、间距等。

Margin and padding

使用 marginpadding spacing utilities来控制元素和组件的间距和大小。Bootstrap包含了一个六级比例的间距实用程序,基于1rem值的默认$spacer变量。为所有视口选择值(例如,.mr-3margin-right: 1rem),或者选择响应的变体来针对特定的视口(例如,.mr-md-3margin-right: 1remmd断点开始)。

切换“可见性”

当不需要切换 display时,你可以使用我们的可见性工具来切换元素的 "可见性"。不可见的元素仍然会影响页面的布局,但在视觉上对访问者是隐藏的。



您需要解锁本帖隐藏内容请: 点击这里
本帖隐藏的内容




上一条: Bootstrap5 槽宽(Gutters)
下一条: Bootstrap5 Z-index