跳至主要內容 跳至文件導覽

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

運作方式

使用我們的回應式顯示工具程式類別變更 display 屬性 的值。我們故意只支援 display 所有可能值的子集。可以根據需要結合類別以產生各種效果。

符號

套用至所有 中斷點(從 xsxxl)的顯示工具程式類別在其中沒有中斷點縮寫。這是因為這些類別從 min-width: 0; 開始套用,因此不受媒體查詢約束。但是,其餘的中斷點確實包含中斷點縮寫。

因此,類別使用以下格式命名

  • .d-{value} 適用於 xs
  • .d-{breakpoint}-{value} 適用於 smmdlgxlxxl

其中 value 為以下之一

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

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

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

範例

d-inline
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。

"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
),