Dislay属性

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

因此，这些类使用以下格式来命名：

• .d-{value} 用于小屏幕适配（即手机适配）
• .d-{breakpoint}-{value} 用于 sm、md、lg、xl等多设备适配。

display常用属性：

• none
• inline
• inline-block
• block
• table
• table-cell
• table-row
• flex
• inline-flex

媒体查询效果屏幕宽度与给定的断点或更大。 例如 .d-lg-none 设置 display：none; 在 lg 和 xl 屏幕上。

<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>

<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>

为了加快移动友好的开发，请使用响应显示类按设备显示和隐藏元素。避免为同一个站点创建完全不同的版本，而是为每个屏幕大小相应地隐藏元素。

若要隐藏元素，只需使用 .d-none 类或 .d-{sm、md、lg、xl}-none 类中的一个类即可进行任何响应屏幕变化。

若要仅在给定的屏幕大小间隔上显示元素，可以将一个 .d-*-none 类与一个 .d-*-* 类组合在一起，例如 .d-none.d-md-block.d-xl-none 将隐藏除中型和大型设备外的所有屏幕大小的元素。

屏幕规格	引用样式
所有屏幕下隐藏	.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空间在不同的屏幕下显示是不同的，请注意观察：

<div class="d-lg-none">大于lg屏幕尺寸时隐藏</div>
<div class="d-none d-lg-block">小于lg屏幕时隐藏</div>

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

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

• .d-print-none
• .d-print-inline
• .d-print-inline-block
• .d-print-block
• .d-print-table
• .d-print-table-row
• .d-print-table-cell
• .d-print-flex
• .d-print-inline-flex

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

<div class="d-print-none">仅屏幕显示 (不可打印)</div>
<div class="d-none d-print-block">P仅支持打印显示(不可在屏幕上显示)</div>
<div class="d-none d-lg-block d-print-block">显示在中等屏幕（不支持大屏幕显示）, 支持打印输出</div>