Bootstrap5 显示属性(Display property)

半兽人 发表于: 2020-07-21   最后更新时间: 2020-07-23  

显示属性

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

符号

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

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

值是以下之一:

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

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

媒体查询会影响给定断点或更大的屏幕宽度。例如,.d-lg-none(设置display: none;)则将应用在lgxlxxl屏幕上。

例子

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

在线运行

<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
<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-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

打印类和显示类可以合并。

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

在线运行



您需要解锁本帖隐藏内容请: 点击这里
本帖隐藏的内容




上一条: Bootstrap5 颜色(Color)
下一条: Bootstrap5 弹性(Flex)