显示通用类别
显示通用类别，可用于切换元件的显示与否，并且可以包含响应式设定，基本的变化如下：
| CSS类 | 说明 |
|---|---|
| d，无 | 不显示也不占空间 |
| d-直列 | 行内并排容器，大小以内容物判定 |
| d-直列块 | 行内块状容器，大小以内容物判定，可设定宽高，上下外距等属性 |
| d区 | 块状容器，大小以空间判定，可设定宽高，上下外距等属性 |
| d表 | 表格容器 |
| d-表小区 | 表格元素容器 |
| d-FLEX | 块级伸缩容器 |
| d-直列-FLEX | 行内级伸缩容器 |
搭配响应式的类型做变化
有了显示通用类别，再搭配响应式的设定，就可以做出响应式显示/隐藏HTML元素的功能。
| BS 3 | BS 4 | 备注 |
|---|---|---|
| 隐藏-XS-下降 | d-none d-sm-block | |
| 隐藏-SM-下降 | d-none d-md-block | |
| 隐藏-MD-下降 | d-none d-lg-block | |
| 隐藏-LG-下降 | d-none d-xl-block | |
| 隐藏-XL-下降 | d，无 | （与隐藏相同） |
| 隐藏-XS-了 | d，无 | （与隐藏相同） |
| 隐藏-SM-了 | d-SM-无 | |
| 隐藏-MD机 | d-MD-无 | |
| 隐藏-LG-了 | d-LG-NONE | |
| 隐藏-XL-了 | d-XL-无 | |
| 隐藏XS | d-none d-sm-block | （只要） |
| 隐藏-SM | d-block d-sm-none d-md-block | （只要） |
| 隐藏-MD | d-block d-md-none d-lg-block | （只要） |
| 隐藏-LG | d-block d-lg-none d-xl-block | （只要） |
| 隐藏-XL | d-block d-xl-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 | （只要） |
整理完后，仿造原本的表格样式做一个对照表。
转载请注明：有客帮 » 使用Bootstrap 4显示/隐藏HTML元素