在GitHub上查看

Display显示

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

本页导航↓

工作原理

使用响应式显示实用工具更改 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
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

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

媒体查询影响屏幕宽度给定的断点或者更大。例如，.d-lg-none 设置 display: none; 适用于 lg， xl 和 xxl 屏幕。

示例

d-inline
d-inline
<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>
d-block d-block 
<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
只在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
<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-* 实用工具相同的 display 值的支持。

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-grid
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

可以组合打印和显示类。

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