显示属性

使用我们的显示实用程序快速响应地切换组件及其他内容的显示值。包括对一些更常见的值的支持，以及一些用于控制打印时显示内容的额外内容。

工作原理

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

符号

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

因此，使用以下格式对类进行命名

• .d-{value} 适用于 xs
• .d-{breakpoint}-{value} 适用于 sm、md、lg 和 xl。

其中 value 是以下之一

• none
• inline
• inline-block
• 块
• 表格
• 表格单元格
• 表格行
• flex
• inline-flex

可以通过更改$displays变量并重新编译SCSS来更改显示值。

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

示例

<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 lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

打印时显示

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

• .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>