顯示屬性

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

運作方式

使用我們的回應式顯示工具類別變更 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 在 lg 和 xl 螢幕上設定 display: none;。

範例

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

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