Bootstrap - 實用工具

本章將討論 Bootstrap 實用工具。許多實用工具類用於各種更改，例如顯示、隱藏、對齊和內容間距，這些用於建立移動友好型和響應式網站。

更改顯示

Bootstrap 顯示屬性 可用於配置顯示。將其與網格系統、內容或元件混合使用，以便在特定視口中顯示或隱藏它們。

Flexbox 選項

• Bootstrap 使用 Flexbox，但並非每個元素都應設定為 display: flex 以避免覆蓋和更改瀏覽器行為。大多數元件都啟用了 Flexbox。

• 要向元素新增 display: flex，請使用 .d-flex 或響應式變體（如 .d-sm-flex）。使用此類或值訪問Flexbox 實用工具 以進行大小調整、對齊、間距等等。

邊距和填充

• 使用 margin 和 padding 實用工具來修改元素的間距和大小。它具有六級間距比例的間距實用工具，基於預設 $spacer 變數的 1rem。

• 您可以選擇某些視口（例如，對於從 sm 斷點開始的 LTR 中的 margin-right: 1rem，使用 .me-sm-3），或視口的數值（例如，對於 LTR 中的 margin-right: 1rem，使用 .me-3）。

切換可見性

可見性實用工具 允許您切換元素的可見性。不可見的元素繼續影響頁面佈局，但對訪問者隱藏。