显示

展示-Bootstrap 5和Material Design 2.0

通过我们的显示屏快速而灵敏地切换组件的显示值以及更多 实用程序。包括对一些更常见值的支持,以及对 打印时控制显示。


这个怎么运作

更改值 display 属性 与我们的响应式显示实用程序类。我们故意仅支持全部 display 的可能值。您可以将课程组合成各种效果 需要。


符号

显示适用于所有对象的实用程序类 断点,从 xs xxl ,其中没有断点缩写。这是因为这些类是 从 min-width:0; 及更高版本开始应用,因此不受媒体查询的约束。的 但是,其余的断点确实包含断点的缩写。

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

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

Where value is one of:

  • 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}-无类用于任何响应屏幕变化。

要仅在给定的屏幕尺寸间隔上显示元素,可以组合一个 例如,带有 .d-*-* 类的 .d-*-none .d-none .d-md-block .d-xl-none .d-xxl-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
Hidden only on xxl .d-xxl-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 .d-xxl-none
Visible only on 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-* 实用程序。

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