13 - 布局工具类之 display 与 flexbox
本帖最后由 不二如是 于 2023-7-20 17:17 编辑使用 .d-flex 工具类可以将元素设置为使用弹性盒子布局，即 display:flex;
我们先介绍一下与 display 属性相关的工具类。
display 的缩写是 d，相应的工具类使用以下格式命名：
.d-{value}
.d-{breakpoint}-{value
value 的取值就是 display 属性的值，包括
：none、inline、inline-block、block、grid、table、table-cell、table-row、flex、inline-flex
在响应式设计中，有时需要控制元素在不同设备上的显示和隐藏，这可以通过组合响应式工具类来实现。
要隐藏元素，可使用 .d-none 工具类；
如果希望针对某类设备隐藏元素，则可使用 .d-{断点}-none 。
因此，可以通过组合 .d-{断点}-none 和 .d-{断点}-block，实现针对不同设备选择性地显示和隐藏某个元素。
例如 .d-none .d-md-block .d-xl-none 表示仅在中号（md）设备上显示该元素，而在其他尺寸的设备上则隐藏该元素。
具体用法详见下表：
屏幕尺寸 类
都隐藏 d-none
仅在xs上隐藏 .d-none.d-sm-block
仅在sm上隐藏 .d-sm-none .d-md-block
仅在md上隐藏 .d-md-none.d-lg-block
仅在lg上隐藏 .d-lg-none.d-xl-block
仅在xl上隐藏 .d-xl-none .d-xxl-block .d-xxl-none
仅在xxl上隐藏都显示 .d-xxl-none
仅在xs上显示 .d-block.d-sm-none
仅在sm上显示 .d-none .d-sm-block.d-md-none
仅在md上显示 .d-none.d-md-block .d-lg-none
仅在lg上显示 .d-none.d-lg-block.d-xl-none
仅在xl上显示 .d-none .d-xl-block .d-xxl-none
仅在xxl上显示 .d-none.d-xxl-block
好好参悟上面表格中的用法哦～
这位鱼油，如果喜欢本帖子，请订阅>>> 专辑 <<<（不喜欢更要订阅{:10_278:} ）
官方 Web 课程：
https://www.bilibili.com/video/BV1QW411N762
页:
[1]