Skip to main content Skip to docs navigation
View on GitHub

Display

使用 display 通用類別快速且響應式的切換元件的顯示與否。我們的 display 通用類別包含許多常用的值,另外在列印時也能使用。

六角學院的 Bootstrap 5 課程上線囉,立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

立即上課去

如何運作

使用響應式的 display 通用類別來改變 display 屬性。我們故意只支援 display 所有可能中的其中一個子集。可以依據需求將這些 class 調整出各種效果。

符號

Display 通用類別可以套用在所有 中斷點,從 xsxxl 都在其中。而這些是從最小寬度 min-width: 0; 開始運用,因此預設不受 media query 限制,然而其餘的斷點都包含縮寫。

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

  • .d-{value} for xs
  • .d-{breakpoint}-{value} for sm, md, lg, xl, and xxl.

value 為以下其中一個:

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

display value 可以透過更改 $displays 變數、重新編譯 SCSS 來改變。

這些 media queries 會影響等於或 大於 中斷點的螢幕設置。舉例來說,.d-lg-none 會在 lgxlxxl 的螢幕上設置 display: none;

Examples

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

隱藏元素

為了更快速且友善的進行移動設備開發,請使用響應式的 display class 來顯示和隱藏元件。避免創建完全不同版本的同一個網站,而是按照每個螢幕尺寸隱藏元素。

要隱藏元素,只需對任何響應式畫面使用 .d-none 或是 .d-{sm,md,lg,xl,xxl}-none 其中之一。

如果只想在給定的螢幕區間上顯示元素,您可以將一個 .d-*-none class 和一個 .d-*-* class 組合,例如 .d-none .d-md-block .d-xl-none .d-xxl-none 將隱藏所有屏幕尺寸的元素,但中型和大型設備除外。

Screen size Class
Hidden on all .d-none
Hidden only on xs .d-none .d-sm-block
Hidden only on sm .d-sm-none .d-md-block
Hidden only on md .d-md-none .d-lg-block
Hidden only on lg .d-lg-none .d-xl-block
Hidden only on xl .d-xl-none .d-xxl-block
Hidden only on xxl .d-xxl-none
Visible on all .d-block
Visible only on xs .d-block .d-sm-none
Visible only on sm .d-none .d-sm-block .d-md-none
Visible only on md .d-none .d-md-block .d-lg-none
Visible only on lg .d-none .d-lg-block .d-xl-none
Visible only on xl .d-none .d-xl-block .d-xxl-none
Visible only on xxl .d-none .d-xxl-block
hide on lg and wider screens
hide on screens smaller than 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

透過我們的 print display 通用類別,可以在列印時改變元素的 display 值。一樣包含 display 的各種 .d-* 通用類別。

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-grid
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

可以將 print 與 display 的 class 組合在一起。

Screen Only (Hide on print only)
Print Only (Hide on screen only)
Hide up to large on screen, but always show on print
<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>

Sass

Utilities API

Display 通用類別在 scss/_utilities.scss 中的 utilities API 中宣告。了解如何使用 utilities API。

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),