in English

顯示屬性

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

這個怎麼運作

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

符號

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

因此,這些類使用以下格式命名:

  • .d-{value}為了xs
  • .d-{breakpoint}-{value}對於sm, md,lgxl.

其中value是以下之一:

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

可以通過更改$displays變量並重新編譯 SCSS 來更改顯示值。

媒體查詢會影響給定斷點或更大的屏幕寬度。例如,同時.d-lg-none設置和屏幕。display: none;lgxl

例子

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
隱藏在 lg 和更寬的屏幕上
隱藏在小於 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-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>