Skip to main content Skip to docs navigation

显示属性

使用我们的显示工具快速响应地切换组件等的显示值。包括对一些更常见值的支持,以及一些用于在打印时控制显示的附加功能。

怎么运行的

¥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(从 xsxxl)的显示实用程序类中不包含断点缩写。这是因为这些类是从 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} 代表 smmdlgxlxxl

    ¥.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-nonelgxlxxl 屏幕上设置 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

d-inline
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-block d-block
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>

隐藏元素

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

屏幕尺寸
隐藏所有.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
hide on screens smaller than 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 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.

Screen Only (Hide on print only)
Print Only (Hide on screen only)
Hide up to large on screen, but always show on print
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

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