显示属性

通过我们的显示实用程序,可以快速响应地切换组件的显示值,以及更多。 包括对某些更常用值的支持,以及一些在打印时控制显示的附加功能。

怎么运行的

使用我们的自适应显示实用程序类更改display property 的值。 我们特意仅支持“显示”所有可能值的子集。 您可以根据需要组合类以实现各种效果。

符号

适用于从xsxl的所有 breakpoints的显示实用工具类没有 它们中的断点缩写。 这是因为这些类从min-width:0;开始使用,因此不受媒体查询的约束。 但是,其余的断点确实包含断点的缩写。

因此,这些类使用以下格式命名:

  • .d-{value} for xs
  • .d-{breakpoint}-{value} for sm, md, lg, and xl.

其中* value *是以下之一:

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

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

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

例子

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} -none类之一即可。

要仅在给定的屏幕尺寸间隔上显示元素,可以将一个.d--none类与一个.d--*类组合,例如,.d-none .d-md-block .d-xl-none`将隐藏所有屏幕尺寸的元素,但中型和大型设备除外。

Screen Size Class
Hidden on all .d-none
Hidden only on xs .d-none .d-sm-block
Hidden only on sm .d-sm-none .d-md-block
Hidden only on md .d-md-none .d-lg-block
Hidden only on lg .d-lg-none .d-xl-block
Hidden only on xl .d-xl-none
Visible on all .d-block
Visible only on xs .d-block .d-sm-none
Visible only on sm .d-none .d-sm-block .d-md-none
Visible only on md .d-none .d-md-block .d-lg-none
Visible only on lg .d-none .d-lg-block .d-xl-none
Visible only on xl .d-none .d-xl-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>

显示和打印

使用我们的打印显示实用程序类进行打印时,更改元素的“显示”值。 包括对与“ .d- *”响应实用程序相同的“ display”值的支持。

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .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>