©
                    This document uses                    PHP Chinese website manual Release                
通过我们的显示实用程序快速响应地切换组件的显示值。包括对一些更常见的值的支持,以及一些额外功能,用于控制打印时的显示。
display价值display属性接受了一些值,我们用实用程序类支持其中的许多值。我们故意不提供每个价值作为实用工具,所以我们支持:
.d-none
.d-inline
.d-inline-block
.d-block
.d-table
.d-table-cell
.d-flex
.d-inline-flex
通过将任何类应用到您选择的元素来使用它们。例如,下面介绍如何使用内联,块或内联块实用程序(同样适用于其他类)。
<div class="d-inline bg-success">d-inline</div><div class="d-inline bg-success">d-inline</div>
<span class="d-block bg-primary">d-block</span>
<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将隐藏除中型和大型设备外的所有屏幕大小的元素。
屏幕尺寸  | 类别  | 
|---|---|
隐藏在所有  | 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  | 
全部可见  | 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  | 
display使用我们的打印显示实用程序进行打印时更改元素的值。
类别  | 打印样式  | 
|---|---|
.d-print-block  | 打印时应用display:block到元素  | 
.d-print-inline  | 打印时应用display:内联到元素  | 
.d-print-inline-block  | 打印时应用display:inline-block到元素  | 
.d-print-none  | 打印时,将元素display:none应用于元素  |