显示属性
通过我们的显示实用程序,可以快速响应地切换组件的显示值,以及更多。 包括对某些更常见值的支持,以及一些在打印时控制显示的附加功能。
这个怎么运作
更改值 display 属性 与我们的响应显示实用程序类。 我们特意仅支持以下所有可能值的子集 display 。您可以根据需要组合类以获得各种效果。
符号
显示适用于所有对象的实用程序类 断点 ,来自 xs to xl ,其中没有断点缩写。 这是因为这些类是从 min-width: 0; 以及更高版本,因此不受媒体查询的约束。 但是,其余的断点确实包含断点的缩写。
因此,这些类使用以下格式命名：
.d-{value}forxs.d-{breakpoint}-{value}forsm,md,lg,和xl.
哪里 值 是其中之一：
noneinlineinline-blockblocktabletable-celltable-rowflexinline-flex
可以通过更改显示值来更改显示值。 $displays 变量并重新编译SCSS。
媒体查询会影响具有给定断点的屏幕宽度 或更大 。例如, .d-lg-none sets display: none; 双方 lg and xl 屏幕。
例子
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块
d块
<span class="d-block p-2 bg-primary text-white"> d块 </span>
<span class="d-block p-2 bg-dark text-white"> d块 </span>隐藏元素
为了更快地进行移动友好型开发,请使用响应式显示类按设备显示和隐藏元素。 避免为同一网站创建完全不同的版本,而应针对每种屏幕尺寸相应地隐藏元素。
要隐藏元素,只需使用 .d-none 类或其中之一 .d-{sm,md,lg,xl}-none 响应屏幕变体的类。
要仅在给定的屏幕尺寸间隔上显示元素,可以组合一个 .d-*-none 一个班 .d-*-* 类,例如 .d-none .d-md-block .d-xl-none 将隐藏所有屏幕尺寸的元素（中型和大型设备除外）。
| 屏幕尺寸 | 类 |
|---|---|
| 隐藏在所有 | .d-none
|
| 仅在xs上隐藏 | .d-none .d-sm-block
|
| 仅在sm上隐藏 | .d-sm-none .d-md-block
|
| 仅在md上隐藏 | .d-md-none .d-lg-block
|
| 仅在LG隐藏 | .d-lg-none .d-xl-block
|
| 仅在xl上隐藏 | .d-xl-none
|
| 所有人可见 | .d-block
|
| 仅在xs上可见 | .d-block .d-sm-none
|
| 仅在sm上可见 | .d-none .d-sm-block .d-md-none
|
| 仅在md上可见 | .d-none .d-md-block .d-lg-none
|
| 仅在LG上可见 | .d-none .d-lg-block .d-xl-none
|
| 仅在xl上可见 | .d-none .d-xl-block
|
隐藏在lg和更宽的屏幕上
隐藏在小于lg的屏幕上
<div class="d-lg-none"> 隐藏在lg和更宽的屏幕上 </div>
<div class="d-none d-lg-block"> 隐藏在小于lg的屏幕上 </div>列印显示
改变 display 使用我们的打印显示实用程序类进行打印时元素的值。 包括对相同内容的支持 display 价值观是我们的回应 .d-* 公用事业。
.d-print-none.d-print-inline.d-print-inline-block.d-print-block.d-print-table.d-print-table-row.d-print-table-cell.d-print-flex.d-print-inline-flex
可以将打印和显示类别组合在一起。
仅屏幕（仅隐藏在印刷品上）
仅打印（仅隐藏在屏幕上）
隐藏在大屏幕上,但始终在打印中显示
<div class="d-print-none"> 仅屏幕（仅隐藏在印刷品上） </div>
<div class="d-none d-print-block"> 仅打印（仅隐藏在屏幕上） </div>
<div class="d-none d-lg-block d-print-block"> 隐藏在大屏幕上,但始终在打印中显示 </div>