顯示方式（Display）

使用display通用類別快速且響應(yīng)式的切換元件的顯示與否。我們的display通用類別包含許多常用的值，另外在打印時(shí)也能使用。

On this page

工作原理

使用響應(yīng)式的display通用類別來(lái)改變display屬性。我們故意只支持display所有可能中的其中一個(gè)子集。可以依據(jù)需求將這些class調(diào)整出各種效果。

符號(hào)

isplay通用類別可以套用在所有斷點(diǎn)，從xs到xxl都在其中。而這些是從最小寬度min-width: 0；開始運(yùn)用，因此預(yù)設(shè)不受media query限制，然而其余的斷點(diǎn)都包含縮寫。

因此，這些class使用以下格式來(lái)命名：

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

value為以下其中一個(gè)：

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

display value可以透過(guò)更改$displays變數(shù)、重新編譯SCSS來(lái)改變。

這些media queries會(huì)影響等于或大于斷點(diǎn)的屏幕設(shè)置。舉例來(lái)說(shuō)，.d-lg-none會(huì)在lg、xl跟xxl的屏幕上設(shè)置display: none；。

示例

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>

隱藏元素

為了更快速且友善的進(jìn)行移動(dòng)設(shè)備開發(fā)，請(qǐng)使用響應(yīng)式的display class來(lái)顯示和隱藏元件。避免創(chuàng)建完全不同版本的同一個(gè)網(wǎng)站，而是按照每個(gè)屏幕尺寸隱藏元素。

要隱藏元素，只需對(duì)任何響應(yīng)式畫面使用.d-none或是.d-{sm，md，lg，xl，xxl}-none其中之一。

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

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>

打印顯示

透過(guò)我們的print display通用類別，可以在打印時(shí)改變?cè)氐膁isplay值。一樣包含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 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
),