Bootstrap Display

Bootstrap使用Display通用类别来快速且响应式地切换元素的显示与否。这个类别包含了许多常用的值，同时还可以在打印时使用。通过使用这些值，我们可以方便地控制元素在各种设备和屏幕尺寸上的显示效果。

一、工作原理

使用Bootstrap的响应式Display通用类别，我们可以方便地改变元素的Display属性。我们只支持Display属性中所有可能值的一个子集，但可以根据需求将这些class调整出各种效果。通过灵活运用这些类，我们可以实现在不同设备和屏幕尺寸上呈现不同样式的效果。

二、符号

Display通用类别可以套用在所有断点，从xs到xxl都在其中。而这些是从最小宽度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会在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将隐藏所有屏幕尺寸的元素，但中型和大型设备除外。

<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>