显示属性

怎么运行的

🌐 How it works

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

🌐 Change the value of the display property with our responsive display utility classes. We purposely support only a subset of all possible values for display. Classes can be combined for various effects as you need.

符号

🌐 Notation

适用于所有断点的显示实用程序类，从 xs 到 xxl，它们不包含断点缩写。这是因为这些类是从 min-width: 0; 开始应用的，因此不受媒体查询约束。然而，其余的断点确实包含断点缩写。

🌐 Display utility classes that apply to all breakpoints, from xs to xxl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0; and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

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

🌐 As such, the classes are named using the format:

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

其中 value 为以下之一：

🌐 Where value is one of:

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

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

🌐 The display values can be altered by changing the display values defined in $utilities and recompiling the SCSS.

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

🌐 The media queries affect screen widths with the given breakpoint or larger. For example, .d-lg-none sets display: none; on lg, xl, and xxl screens.

示例

🌐 Examples

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>

隐藏元素

🌐 Hiding elements

为了更快速的移动友好开发，请使用响应式显示类按设备显示和隐藏元素。避免创建完全不同版本的网站，而是针对每个屏幕尺寸响应式地隐藏元素。

🌐 For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.

要隐藏元素，只需使用 .d-none 类或任意一个 .d-{sm,md,lg,xl,xxl}-none 类来适应不同的响应式屏幕变化。

🌐 To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl,xxl}-none classes for any responsive screen variation.

要仅在特定屏幕尺寸区间显示一个元素，你可以将一个 .d-*-none 类与一个 .d-*-* 类结合使用，例如 .d-none .d-md-block .d-xl-none 将隐藏元素在所有屏幕尺寸上，除了中等和大型设备。

🌐 To show an element only on a given interval of screen sizes you can combine one .d-*-none class with a .d-*-* class, for example .d-none .d-md-block .d-xl-none will hide the element for all screen sizes except on medium and large devices.

<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 in print

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

🌐 Change the display value of elements when printing with our print display utility classes. Includes support for the same display values as our responsive .d-* utilities.

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

打印类和显示类可以组合。

🌐 The print and display classes can be combined.

<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

🌐 Sass utilities API

显示工具在我们的 scss/_utilities.scss 工具 API 中声明。了解如何使用工具 API。

🌐 Display utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

"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
),