# 显示辅助
显示辅助器允许你控制内容的显示。 可以根据当前视图或实际元素显示类型有条件地显示内容。
| 设备 | 代码 | 类型 | 像素范围 |
|---|---|---|---|
| Extra small (超小号) | xs | 小型号到大型号的手机 | < 600px |
| Small (小号) | sm | 小型号到中型号的平板 | 600px > < 960px |
| Medium (中号) | md | 大型号平板到手提电脑 | 960px > < 1264px* |
| Large (大号) | lg | 桌面端 | 1264px > < 1904px* |
| Extra large (超大号) | xl | 4K 和超宽屏幕 | > 1904px* |
| 桌面端上浏览器滚动条的宽度为 * -16px | |||
| 规格 | |||
# 显示
指定元素的 display 属性。 这些类可以应用于从 xs 到 xl 的所有断点。 当使用基础类时，.d-{value}, 被推断为 .d-${value}-xs。
.d-{value}用于xs.d-{breakpoint}-{value}用于sm,md,lg和xl
该 value 属性的值是以下之一：
noneinlineinline-blockblocktabletable-celltable-rowflexinline-flex
当为显示辅助类设置一个特定断点时，它将应用于所有屏幕从指定值开始的宽度。 例如， d-lg-flex 将适用于 lg 和 xl 的屏幕尺寸。
# 可见性
根据当前 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-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 |
此外, 您还可以使用横向显示辅助类基于当前 viewport 宽度上限来显示元素。 这些类可以使用以下格式 hidden-{breakpoint}-{condition} 使用。
基于以下 条件 应用类:
only- 只在xs至xl断点隐藏元素and-down- 在指定的断点和以下隐藏元素, 从sm到lg断点and-up- 在指定的断点和以上隐藏元素, 从sm到lg断点
此外, 可以使用 only 条件确定目标 媒体类型 。 目前支持 hidden-screen-only 和 hidden-print-only 。
# 打印显示
你还可以在打印时更改显示属性。
.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
打印功能类也可以与无打印显示功能组合。
# 无障碍
# 屏幕阅读器
使用 d-sr 工具类在 除 屏幕阅读器外所有的设备上隐藏内容。