显示辅助

显示辅助类可以帮助你控制内容的显示。它包括了根据当前视口 (viewport) 大小或者元素的显示类型来调整显示的情况。

类	代表值
d-none	display: none;
d-sm-none	display: none;
d-md-none	display: none;
d-lg-none	display: none;
d-xl-none	display: none;
d-xxl-none	display: none;
d-sm-flex	display: flex;
d-md-flex	display: flex;
d-lg-flex	display: flex;
d-xl-flex	display: flex;
d-xxl-flex	display: flex;
d-sm-inline	display: inline;
d-md-inline	display: inline;
d-lg-inline	display: inline;
d-xl-inline	display: inline;
d-xxl-inline	display: inline;
d-sm-inline-block	display: inline-block;
d-md-inline-block	display: inline-block;
d-lg-inline-block	display: inline-block;
d-xl-inline-block	display: inline-block;
d-xxl-inline-block	display: inline-block;
d-sm-table	display: table;
d-md-table	display: table;
d-lg-table	display: table;
d-xl-table	display: table;
d-xxl-table	display: table;
d-sm-table-cell	display: table-cell;
d-md-table-cell	display: table-cell;
d-lg-table-cell	display: table-cell;
d-xl-table-cell	display: table-cell;
d-xxl-table-cell	display: table-cell;
d-sm-table-row	display: table-row;
d-md-table-row	display: table-row;
d-lg-table-row	display: table-row;
d-xl-table-row	display: table-row;
d-xxl-table-row	display: table-row;
d-sm-flex	display: flex;
d-md-flex	display: flex;
d-lg-flex	display: flex;
d-xl-flex	display: flex;
d-xxl-flex	display: flex;
d-sm-inline-flex	display: inline-flex;
d-md-inline-flex	display: inline-flex;
d-lg-inline-flex	display: inline-flex;
d-xl-inline-flex	display: inline-flex;
d-xxl-inline-flex	display: inline-flex;
d-print-none	display: none;
d-print-inline	display: inline;
d-print-inline-block	display: inline-block;
d-print-block	display: block;
d-print-table	display: table;
d-print-table-cell	display: table-cell;
d-print-table-row	display: table-row;
d-print-flex	display: flex;
d-print-inline-flex	display: inline-flex;
d-sr-only	display: none;
d-sr-only-focusable	display: none;

Device	Code	Type	Range
Extra small	xs	Small to large phone	< 600px
Small	sm	Small to medium tablet	600px > < 960px
Medium	md	Large tablet to laptop	960px > < 1280px
Large	lg	Laptop to desktop	1280px > < 1920px
Extra large	xl	1080p to 1440p desktop	1920px > < 2560px
Extra extra large	xxl	4k and ultra-wide	> 2560px
Specification

显示 (Display)

指定元素的display属性。这些类可以应用于从 xs 到 xxl 的所有断点。使用基类时，.d-{value}，则推断为 .d-xs-{value}。

• .d-{value} 用于 xs
• .d-{breakpoint}-{value} 用于 sm, md, lg, xl, 和 xxl

该 value 属性的值是以下之一：

• none
• inline
• inline-block
• block
• table
• table-cell
• table-row
• flex
• inline-flex

当为显示助手类设置特定的断点时，它将应用于从指定位置开始的所有屏幕宽度。例如,d-lg-flex 将适用于 lg, xl 和 xxl 尺寸的屏幕。

可见性

根据当前**viewport （视口）**有条件地显示元素。断点实用程序类总是自底向上应用。这意味着如果您有.d-none，它将应用于所有断点。但是， .d-md-none只适用于md及以上。

屏幕尺寸	类
全部隐藏	.d-none
仅在 xs 大小时隐藏	.d-none .d-sm-flex
仅在 sm 大小时隐藏	.d-sm-none .d-md-flex
仅在 md 大小时隐藏	.d-md-none .d-lg-flex
仅在 lg 大小时隐藏	.d-lg-none .d-xl-flex
仅在 xl 大小时隐藏	.d-xl-none .d-xxl-flex
仅在 xxl 大小时隐藏	.d-xxl-none
全部可见	.d-flex
仅在 xs 大小时可见	.d-flex .d-sm-none
仅在 sm 大小时可见	.d-none .d-sm-flex .d-md-none
仅在 md 大小时可见	.d-none .d-md-flex .d-lg-none
仅在 lg 大小时可见	.d-none .d-lg-flex .d-xl-none
仅在 xl 大小时可见	.d-none .d-xl-flex .d-xxl-none
仅在 xxl 大小时可见	.d-none .d-xxl-flex

或者，您可以使用横向显示帮助器类隐藏基于当前**viewport （视口）**的元素。可以使用以下格式应用这些类:hidden-{breakpoint}-{condition?}

基于以下 条件 应用类:

• 无-仅在指定的断点上隐藏元素
• and-down - 在指定的断点上隐藏以下元素，只能从 sm 到 xl
• and-up - 在指定的断点上隐藏以上元素，只能从 sm 到 xl

hidden-{breakpoint}-and-up 等同于 d-{breakpoint}-none.

Media types也可以用唯一条件进行针对性的使用。目前只支持hidden-screen-only和hidden-print-only。

注意

INFO

需要注意的是，使用上述任何显示类都会导致覆盖之前添加的任何显示样式。这是因为类在其显示样式中使用了!important。

打印显示

您还可以在打印时更改显示属性。打印实用程序类也可以与无打印显示实用程序组合使用。

无障碍

屏幕阅读器

使用d-sr实用程序类可以有条件地隐藏除屏幕阅读器 以外 的所有设备上的内容。

• d-sr-only 视觉隐藏元素但仍会通知 screen readers (屏幕阅读器) 。
• d-sr-only-focusable 在视觉上隐藏一个元素，直到它被聚焦。这在实现 跳过链接 时非常有用。