Bootstrap5工具類速查:margin、padding與顯示隱藏技巧
2025-12-20
24 閱讀
Bootstrap5基本用法
Bootstrap5工具類速查
margin/padding工具類
Bootstrap5顯示隱藏
Bootstrap5響應式
Bootstrap5教程
Bootstrap5工具類能通過類名快速設置樣式,無需寫CSS,極大提升開發效率。核心介紹了margin/padding工具類和顯示隱藏技巧。 margin/padding類名格式爲`[屬性]-[方向]-[尺寸]`,屬性m(margin)或p(padding),方向t/b/l/r/x/y(x/y爲複合方向),尺寸0-5(對應0.25rem-3rem)及auto(僅margin)。常用類如mt-3(上外邊距1rem)、mx-3(左右邊距)、mx-auto(塊級元素居中);padding類如pt-2(上內邊距0.5rem)、px-3(左右內邊距)。 顯示隱藏技巧用`d-*`類控制display:d-none隱藏(不佔空間),d-block/flex爲塊級/彈性顯示。響應式通過斷點(sm-xxl)組合:d-md-none(中等以上隱藏)、d-none d-md-block(移動端隱藏,中等以上顯示)。`invisible`類使元素不可見但保留空間。 掌握這些工具類,結合語義化HTML即可高效
閱讀全文