显示属性

通过显示实用工具，可以快速响应地切换组件的显示值。包括对某些更常见值的支持，以及一些在打印时控制显示的附加功能。

符号

使用以下格式命名：

• .d-{value} 为 xs
• .d-{breakpoint}-{value} 为 sm，md，lg，xl 和 xxl.

值是以下之一：

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

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

媒体查询会影响给定断点或更大的屏幕宽度。例如，.d-lg-none（设置display: none;）则将应用在lg，xl和xxl屏幕上。

例子

<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,xxl}-none类中的一个，即可实现任何响应式屏幕变化。

要在给定的屏幕尺寸区间上显示一个元素，你可以将一个.d-*-none类和一个.d-*-*类结合起来，例如.d-none .d-md-block .d-xl-none .d-xxl-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

<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类来打印时，改变元素的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>

在线运行