布局通用類(Utilities)
布局通用類(Utilities)有時翻譯為布局實用程序,為了更快的移動友好和響應性開發,Bootstrap包含了幾十個用于顯示、隱藏、對齊和間隔內容的實用程序類。
更改 display
Use our display utilities for responsively toggling common values of the
display
property. Mix it with our grid system, content, or components to show or hide them across
specific viewports.
使用我們的顯示實用程序來響應地切換display屬性的公共值。將它與我們的網格系統、內容或組件混合,以便在特定的視口中顯示或隱藏它們。
彈性盒子選項
Bootstrap是用flexbox構建的,但并不是每個元素的顯示都被更改為display:flex,因為這將添加許多不必要的覆蓋,并意外地更改關鍵瀏覽器行為。我們的大多數組件都是使用flexbox構建的。
如果需要將display:flex添加到元素中,請使用.d-flex或響應變體之一(例如.d-sm-flex
)進行添加。您將需要這個類或顯示值來允許使用我們額外的flexbox實用程序來調整大小、對齊、間距等。
display: flex
to an element, do so with .d-flex
or one of the
Margin and padding
使用“邊距”和“填充間距”(margin
and padding
)工具可以控制元素和組件的間距和大小。Bootstrap包含一個基于$spacer變量的1rem 默認值用于間隔實用程序的六級刻度。為所有視口選擇值(例如,.me-3
表示右邊距:1rem in LTR),或選擇響應變體以針對特定視口(例如,.me-md-3
表示右邊距:1rem-in LTR-從md斷點開始)。
切換 visibility
當不需要切換顯示display
時,可以使用可見性實用程序切換元素的可見性visibility
。不可見的元素仍然會影響頁面的布局,但在視覺上對訪問者是隱藏的。