显示属性 | Display property

显示属性

通过我们的显示实用程序快速响应地切换组件的显示值。包括对一些更常见的值的支持，以及一些额外功能，用于控制打印时的显示。

共同的display价值

display属性接受了一些值，我们用实用程序类支持其中的许多值。我们故意不提供每个价值作为实用工具，所以我们支持：

• .d-none

• .d-inline

• .d-inline-block

• .d-block

• .d-table

• .d-table-cell

• .d-flex

• .d-inline-flex

通过将任何类应用到您选择的元素来使用它们。例如，下面介绍如何使用内联，块或内联块实用程序（同样适用于其他类）。

打开getbootstrap.com上的示例

<div class="d-inline bg-success">d-inline</div>
<div class="d-inline bg-success">d-inline</div>

打开getbootstrap.com上的示例

<span class="d-block bg-primary">d-block</span>

打开getbootstrap.com上的示例

<div class="d-inline-block bg-warning">d-inline-block</div>
<div class="d-inline-block bg-warning">d-inline-block</div>

对于上面提到的每一个实用程序也都有响应变化。

• .d-none

• .d-inline

• .d-inline-block

• .d-block

• .d-table

• .d-table-cell

• .d-flex

• .d-inline-flex

• .d-sm-none

• .d-sm-inline

• .d-sm-inline-block

• .d-sm-block

• .d-sm-table

• .d-sm-table-cell

• .d-sm-flex

• .d-sm-inline-flex

• .d-md-none

• .d-md-inline

• .d-md-inline-block

• .d-md-block

• .d-md-table

• .d-md-table-cell

• .d-md-flex

• .d-md-inline-flex

• .d-lg-none

• .d-lg-inline

• .d-lg-inline-block

• .d-lg-block

• .d-lg-table

• .d-lg-table-cell

• .d-lg-flex

• .d-lg-inline-flex

• .d-xl-none

• .d-xl-inline

• .d-xl-inline-block

• .d-xl-block

• .d-xl-table

• .d-xl-table-cell

• .d-xl-flex

• .d-xl-inline-flex

隐藏元素

为了加速移动设备的开发，请使用响应式显示类来显示和隐藏设备中的元素。避免创建完全不同的同一站点版本，而是针对每个屏幕大小响应地隐藏元素。

要隐藏元素，只需使用.d-none类或其中一个.d-{sm,md,lg,xl}-none类来响应任何屏幕变化。

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

显示打印

display使用我们的打印显示实用程序进行打印时更改元素的值。