顯示屬性

使用我們的顯示實用程序快速響應地切換組件的顯示值等。包括對一些更常見值的支持，以及一些用於在打印時控制顯示的附加功能。

這個怎麼運作

使用我們的響應式顯示實用程序類更改display屬性的值。我們特意只支持 的所有可能值的一個子集display。可以根據需要組合類以獲得各種效果。

符號

顯示適用於所有斷點的實用程序類，從xs到xl，其中沒有斷點縮寫。這是因為這些類是自上而下應用的min-width: 0;，因此不受媒體查詢的約束。但是，其餘斷點確實包含斷點縮寫。

因此，這些類使用以下格式命名：

• .d-{value}為了xs
• .d-{breakpoint}-{value}對於sm, md,lg和xl.

其中value是以下之一：

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

可以通過更改$displays變量並重新編譯 SCSS 來更改顯示值。

媒體查詢會影響給定斷點或更大的屏幕寬度。例如，同時.d-lg-none設置和屏幕。display: none;lgxl

例子

<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}-none類用於任何響應式屏幕變化。

要僅在給定的屏幕尺寸間隔上顯示元素，您可以將一個.d-*-none類與一個.d-*-*類結合起來，例如.d-none .d-md-block .d-xl-none將隱藏所有屏幕尺寸的元素，除了中型和大型設備。

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