显示方式（Display）

使用display通用类别快速且响应式的切换元件的显示与否。我们的display通用类别包含许多常用的值，另外在打印时也能使用。

On this page

工作原理

使用响应式的display通用类别来改变display属性。我们故意只支持display所有可能中的其中一个子集。可以依据需求将这些class调整出各种效果。

符号

isplay通用类别可以套用在所有断点，从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；。

示例

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>

打印显示

透过我们的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 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
),
返回顶部