显示方式(Display)

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

工作原理

使用响应式的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
        ),
        
返回顶部