顯示屬性
使用我們的顯示實用程序快速響應地切換組件的顯示值等。包括對一些更常見值的支持,以及一些用於在打印時控制顯示的附加功能。
使用我們的響應式顯示實用程序類更改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
媒體查詢影響具有給定斷點或更大的屏幕寬度。例如,同時.d-lg-none
設置和屏幕。display: none;
lg
xl
d-內聯
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}-none
類用於任何響應式屏幕變化。
要僅在給定的屏幕尺寸間隔上顯示元素,您可以將一個.d-*-none
類與一個.d-*-*
類結合起來,例如.d-none .d-md-block .d-xl-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-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 |
hide on screens wider than lg
隱藏在小於 lg 的屏幕上
<div class="d-lg-none">hide on screens wider than lg</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
可以組合打印和顯示類。
僅屏幕(僅在打印時隱藏)
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>