顯示屬性

使用我們的顯示工具程式快速且靈活地切換元件及其他項目的顯示值。包括支援一些較常見的值，以及一些用於控制列印時顯示的額外項目。

在此頁面上

運作方式

使用我們的回應式顯示工具程式類別變更 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
inline-grid
table
table-cell
table-row
flex
inline-flex

可透過變更 $utilities 中定義的 display 值，並重新編譯 SCSS，來變更顯示值。

媒體查詢會影響具有給定斷點 或更大 的螢幕寬度。例如，.d-lg-none 會在 lg、xl 和 xxl 螢幕上設定 display: none;。

範例

d-inline

html

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

d-block d-block

html

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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`

在 lg 及更寬螢幕上隱藏

在小於 lg 的螢幕上隱藏

html

<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 值。包含與我們的回應式 .d-* 公用程式相同的 display 值支援。

.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-grid
.d-print-inline-grid
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex

列印和顯示類別可以合併使用。

僅顯示在螢幕（僅在列印時隱藏）

僅列印（僅在螢幕上隱藏）

在螢幕上隱藏至大型螢幕，但在列印時始終顯示

html

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

CSS

Sass 公用程式 API

顯示公用程式在 scss/_utilities.scss 中的公用程式 API 中宣告。了解如何使用公用程式 API。

scss/_utilities.scss

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