显示隐藏

一、Dislay属性

显示适用于从xsxl,的所有 breakpoints的实用程序类,其中没有breakpoints缩写。 这是因为这些类是从 min-width: 0; 并且因此不受媒体查询的限制。 然而,其余的断点包含断点缩写。

因此,这些类使用以下格式来命名:

display常用属性:

媒体查询效果屏幕宽度与给定的断点或更大。 例如,.d-lg-none sets display:none; lgxl屏幕上。

二、实例

d-inline
d-inline
d-block d-block

三、隐藏的元素

屏幕规格 引用样式
所有屏幕下隐藏 .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-block
仅在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

下面两个div空间在不同的屏幕下显示是不同的,请注意观察:

大于lg屏幕尺寸时隐藏
小于lg屏幕时隐藏

四、面向打印的显示属性控制处理

在处理打印样式时,通过display通用样式来改变相应值处理呈现效果。

屏幕与打印显示可以并列设置,下面有三段代码,请注意观察它们在不同屏幕大小的显示。

仅屏幕显示 (不可打印)
P仅支持打印显示(不可在屏幕上显示)
显示在中等屏幕(不支持大屏幕显示), 支持打印输出