Display 工具可快速且包含响应式的切换元件的显示与否,我们的 Display 工具包含许多常用的值,另外在打印时也能使用。
使用 display 的工具类来改变 display 属性,我们故意只支持 display
所有可能的一个子集,可以依据需求将这些 Class 调整出各种效果。
Display 工具可以应用在所有中断点,从 xs
到 xl
,都在其中,而这些是从最小宽度 min-width: 0;
开始运用,因此预设不受 media query 限制,然而其余的断点都包含缩写。
因此,这些 Class 使用以下格式来命名:
.d-{value}
for xs
.d-{breakpoint}-{value}
for sm
, md
, lg
, and xl
.值可以替換成以下:
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex
这些 media queries 会设置大于中断点,举例来说: .d-lg-none
在 lg
和 xl
屏幕上設置.d-lg-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>
为了更快地进行移动设备开发,请使用响应式显示类来按设备显示和隐藏元素。 避免创建相同站点的完全不同版本,而是相应地为每个屏幕大小隐藏元素
隐藏元素只需使用 .d-none
类或者其中一个 .d-{sm,md,lg,xl}-none
任何响应式屏幕变化的类。
要仅在给定的屏幕尺寸间隔上显示元素,你可以组合一个.d-*-none
类和一个 .d-*-*
class,例如 .d-none .d-md-block .d-xl-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 |
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 |
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
可以在打印时通过 display
工具改变 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">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>