顯示方式（Display）
使用display通用類別快速且響應式的切換元件的顯示與否。我們的display通用類別包含許多常用的值，另外在打印時也能使用。
工作原理
使用響應式的display通用類別來改變display屬性。我們故意只支持display所有可能中的其中一個子集。可以依據需求將這些class調整出各種效果。
符號
isplay通用類別可以套用在所有斷點，從xs到xxl都在其中。而這些是從最小寬度min-width: 0；開始運用，因此預設不受media query限制，然而其余的斷點都包含縮寫。
因此，這些class使用以下格式來命名：
.d-{value}forxs.d-{breakpoint}-{value}forsm,md,lg,xl, andxxl.
value為以下其中一個：
noneinlineinline-blockblockgridtabletable-celltable-rowflexinline-flex
display value可以透過更改$displays變數、重新編譯SCSS來改變。
這些media queries會影響等于或大于斷點的屏幕設置。舉例來說，.d-lg-none會在lg、xl跟xxl的屏幕上設置display: none；。
示例
<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><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 |
<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>打印顯示
透過我們的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組合在一起。
<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 utilities are declared in our utilities API in scss/_utilities.scss.
"display": (
responsive: true,
print: true,
property: display,
class: d,
values: inline inline-block block grid table table-row table-cell flex inline-flex none
),