Bootstrap 简明教程

Bootstrap - Utilities

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

This chapter will discuss about Bootstrap utilities. Several utility classes are used for various changes, such as showing, hiding, aligning, and spacing content, these are used to create mobile-friendly and responsive websites.

Changing display

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

Bootstrap display properties can be used to configure the display. Mix it with a grid system, content, or component to display or hide them on particular viewports.

Flexbox options

  1. Bootstrap uses flexbox, but not every element should be to display:flex to avoid overriding and changing browser behaviors. Most of the components are built with flexbox enabled.

  2. In order to add display: flex to an element, use .d-flex or responsive variants (like .d-sm-flex). Use this class or value to access flexbox utilities for sizing, alignment, spacing, and more.

Margin and padding

  1. Use margin and padding utilities to modify the element’s spacing and sizing. It has a six-level spacing scale for spacing utilities based on 1rem default $spacer variable.

  2. You can select certain viewports (e.g., .me-sm-3 for margin-right: 1rem —in LTR— starting at the sm breakpoint), or values for the viewports (e.g., .me-3 for margin-right: 1rem in LTR).

Toggle visibility

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

Visibility utilities allow you to toggle an element’s visibility. Invisible elements continue to affect page layout but are hidden from visitors.