bootstrap4.4在不同屏幕上自适应的隐藏与显示方法

bootstrap是一个响应式移动优先的前端框架，如何实现在不同屏幕上自适应隐藏和显示不同的HTML元素呢，当前最新的版本bootstrap4.4和之前的版本中略有不同，在制作自适应页面时或多或少会用到，而且非常方便，如何实现某个元素只在PC上显示其他屏幕不显示，或者在移动小屏幕和PC上显示，平板上隐藏，这样的自适应该如何实现呢。

bootstrap4使用d-(xs)-none这样的方式来实现显示与隐藏元素，使用display:none元素无占位的方式。在帮助文档里面，列出了显示隐藏的具体方式，可以直接拿过来用，如下表所示。

在上表中首先要掌握bootstrap的网格系统，各个屏幕宽度的像素如下，手机屏幕一般是小于768px，平板的屏幕768px~1200px，大于1200px的屏幕宽度为PC。

有了上面的这两个对照表就好办了，为了更快地进行移动友好型开发，请使用响应式显示类来按设备显示和隐藏元素。避免为同一网站创建完全不同的版本，而应针对每个屏幕尺寸相应地隐藏元素。

要隐藏元素，只需对任何响应屏幕变化使用.d-none这个class即可，语法为：

.d-{sm,md,lg,xl}-none

要仅在给定的屏幕尺寸间隔上显示元素，可以将一个.d-*-none类与一个.d-*-*类组合使用，例如，

.d-none .d-md-block .d-xl-none

将为所有屏幕尺寸隐藏该元素，但在中型和大型设备上则会显示。