布局通用類(Utilities)
布局通用類(Utilities)有時(shí)翻譯為布局實(shí)用程序,為了更快的移動(dòng)友好和響應(yīng)性開發(fā),Bootstrap包含了幾十個(gè)用于顯示、隱藏、對(duì)齊和間隔內(nèi)容的實(shí)用程序類。
更改 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.
使用我們的顯示實(shí)用程序來響應(yīng)地切換display屬性的公共值。將它與我們的網(wǎng)格系統(tǒng)、內(nèi)容或組件混合,以便在特定的視口中顯示或隱藏它們。
彈性盒子選項(xiàng)
Bootstrap是用flexbox構(gòu)建的,但并不是每個(gè)元素的顯示都被更改為display:flex,因?yàn)檫@將添加許多不必要的覆蓋,并意外地更改關(guān)鍵瀏覽器行為。我們的大多數(shù)組件都是使用flexbox構(gòu)建的。
如果需要將display:flex添加到元素中,請(qǐng)使用.d-flex或響應(yīng)變體之一(例如.d-sm-flex
)進(jìn)行添加。您將需要這個(gè)類或顯示值來允許使用我們額外的flexbox實(shí)用程序來調(diào)整大小、對(duì)齊、間距等。
display: flex
to an element, do so with .d-flex
or one of the
Margin and padding
使用“邊距”和“填充間距”(margin
and padding
)工具可以控制元素和組件的間距和大小。Bootstrap包含一個(gè)基于$spacer變量的1rem 默認(rèn)值用于間隔實(shí)用程序的六級(jí)刻度。為所有視口選擇值(例如,.me-3
表示右邊距:1rem in LTR),或選擇響應(yīng)變體以針對(duì)特定視口(例如,.me-md-3
表示右邊距:1rem-in LTR-從md斷點(diǎn)開始)。
切換 visibility
當(dāng)不需要切換顯示display
時(shí),可以使用可見性實(shí)用程序切換元素的可見性visibility
。不可見的元素仍然會(huì)影響頁(yè)面的布局,但在視覺上對(duì)訪問者是隱藏的。