顯示屬性

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

在本頁面

這個怎麼運作

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

符號

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

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

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

其中value是以下之一：

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

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

<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 .d-xxl-block`
僅在 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`

hide on lg and wider screens

隱藏在小於 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

可以組合打印和顯示類。

僅屏幕（僅在打印時隱藏）

Print Only (Hide on screen only)

在屏幕上隱藏到最大，但總是在打印時顯示

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

薩斯

實用程序 API

顯示實用程序在我們的實用程序 API 中聲明scss/_utilities.scss。了解如何使用實用程序 API。

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),