顯示屬性
使用我們的顯示工具程式快速且靈活地切換元件及其他項目的顯示值。包括支援一些較常見的值,以及一些用於控制列印時顯示的額外項目。
運作方式
使用我們的回應式顯示工具程式類別變更 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;
。
範例
<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>
<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 |
<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
列印和顯示類別可以合併使用。
<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。
"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
),