显示属性

使用我们的显示实用程序快速响应地切换组件的显示值等。包括对一些更常见值的支持，以及一些用于在打印时控制显示的附加功能。

这个怎么运作

使用我们的响应式显示实用程序类更改display属性的值。我们特意只支持 的所有可能值的一个子集display。可以根据需要组合类以获得各种效果。

符号

显示适用于所有断点的实用程序类，从xs到xl，其中没有断点缩写。这是因为这些类是自上而下应用的min-width: 0;，因此不受媒体查询的约束。但是，其余断点确实包含断点缩写。

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

• .d-{value}为了xs
• .d-{breakpoint}-{value}对于sm, md,lg和xl.

其中value是以下之一：

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

媒体查询影响具有给定断点或更大的屏幕宽度。例如，同时.d-lg-none设置和屏幕。display: none;lgxl

例子

<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将隐藏除中型和大型设备之外的所有屏幕尺寸的元素。

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

打印显示

display使用我们的打印显示实用程序类打印时更改元素的值。包括对与display我们的响应.d-*式实用程序相同的值的支持。

• .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">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>