最新消息:本站所有跳转向bbs.ykit.cn的附件将全面停止,附件已转移到https://www.qingsj.com

使用Bootstrap 4显示/隐藏HTML元素

html 有客 89浏览 0评论

显示通用类别

显示通用类别,可用于切换元件的显示与否,并且可以包含响应式设定,基本的变化如下:

CSS类说明
d,无不显示也不占空间
d-直列行内并排容器,大小以内容物判定
d-直列块行内块状容器,大小以内容物判定,可设定宽高,上下外距等属性
d区块状容器,大小以空间判定,可设定宽高,上下外距等属性
d表表格容器
d-表小区表格元素容器
d-FLEX块级伸缩容器
d-直列-FLEX行内级伸缩容器

搭配响应式的类型做变化

有了显示通用类别,再搭配响应式的设定,就可以做出响应式显示/隐藏HTML元素的功能。

BS 3BS 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-无
隐藏XSd-none d-sm-block(只要)
隐藏-SMd-block d-sm-none d-md-block(只要)
隐藏-MDd-block d-md-none d-lg-block(只要)
隐藏-LGd-block d-lg-none d-xl-block(只要)
隐藏-XLd-block d-xl-none(只要)
可见-XSd-block d-sm-none(只要)
可见-SMd-none d-sm-block d-md-none(只要)
可见-MDd-none d-md-block d-lg-none(只要)
可见,LGd-none d-lg-block d-xl-none(只要)
可见-XLd-none d-xl-block(只要)

整理完后,仿造原本的表格样式做一个对照表。

转载请注明:有客帮 » 使用Bootstrap 4显示/隐藏HTML元素

您必须 登录 才能发表评论!