使用我们的显示实用程序快速、响应地切换组件的显示值等。包括对一些更常见值的支持，以及一些用于在打印时控制显示的附加功能。
运作方式
使用我们的响应式显示实用程序类更改 display 属性的值。我们特意仅支持 的所有可能值的子集 .可以根据需要组合类以获得各种效果。display
表示法
适用于所有断点 （从 到 ） 的显示实用程序类中没有断点缩写。这是因为这些类是从 从 向上应用的，因此不受媒体查询的约束。但是，其余断点确实包含断点缩写。xsxxlmin-width: 0;
因此，这些类的命名格式如下：
.d-{value}为xs.d-{breakpoint}-{value}对于 、 、 、 和 。smmdlgxlxxl
其中值是以下之一：
noneinlineinline-blockblockgridinline-gridtabletable-celltable-rowflexinline-flex
可以通过更改 SCSS 中定义的值并重新编译 SCSS 来更改显示值。display$utilities
媒体查询会影响给定断点或更大的屏幕宽度。例如，设置 、 和 屏幕。.d-lg-nonedisplay: none;lgxlxxl
例子
D-内联
D-内联
<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div> D型块
D型块
<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>隐藏元素
为了加快适合移动设备的开发速度，请使用响应式显示类按设备显示和隐藏元素。避免为同一网站创建完全不同的版本，而是针对每种屏幕尺寸响应式隐藏元素。
要隐藏元素，只需将类或其中一个类用于任何响应式屏幕变体。.d-none.d-{sm,md,lg,xl,xxl}-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-xxl-block |
| 仅在 xxl 上隐藏 | .d-xxl-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 .d-xxl-none |
| 仅在 xxl 上可见 | .d-none .d-xxl-block |
hide on lg and wider screens
隐藏在小于 LG 的屏幕上
<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>印刷显示
使用我们的打印显示实用程序类打印时更改元素的值。包括对与响应式实用程序相同的值的支持。displaydisplay.d-*
.d-print-none.d-print-inline.d-print-inline-block.d-print-block.d-print-grid.d-print-inline-grid.d-print-table.d-print-table-row.d-print-table-cell.d-print-flex.d-print-inline-flex
打印类和显示类可以组合使用。
仅屏幕（仅在打印时隐藏）
Print Only (Hide on screen only)
在屏幕上隐藏至大，但在打印时始终显示
<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>CSS系统
Sass 实用程序 API
显示实用程序在我们的实用程序 API 中声明。了解如何使用实用工具 API。scss/_utilities.scss
"display": (
responsive: true,
print: true,
property: display,
class: d,
values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
),