显示

使用我们的显示工具快速且灵活地切换组件及其他元素的显示值。支持一些常用值，以及用于控制打印时显示的额外选项。

本页目录

它是如何工作的

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

符号

适用于所有断点的显示工具类，从 xs 到 xxl，其中没有断点缩写。这是因为这些类从 min-width: 0; 起应用，因此不受媒体查询的限制。然而，其余的断点确实包含断点缩写。

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

.d-{value} 为 xs
.d-{breakpoint}-{value} 为 sm、md、lg、xl 和 xxl。

其中 value 为以下之一：

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

显示值可以通过更改来修改 display 定义在 $utilities 并重新编译 SCSS。

媒体查询影响具有给定断点的屏幕宽度 或更大例如， .d-lg-none 集合 display: none; 开 lg, xl，和 xxl 屏幕。

示例

d-inline

HTML

<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-块

HTML

<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`

在大屏幕及更大屏幕上隐藏

在小于 lg 的屏幕上隐藏

HTML

<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-grid
.d-print-inline-grid
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex

打印类和显示类可以结合使用。

仅屏幕显示（仅在打印时隐藏）

仅打印（仅在屏幕上隐藏）

在屏幕上隐藏到大尺寸，但在打印时始终显示

HTML

<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 中的 scss/_utilities.scss 中声明。了解如何使用工具类 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
),