显示属性

怎么运行的

¥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

适用于所有 breakpoints（从 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-{value} for xs

• .d-{breakpoint}-{value} 代表 sm、md、lg、xl 和 xxl。

  ¥.d-{breakpoint}-{value} for sm, md, lg, xl, and 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
),