显示助手允许你控制内容的显示。这包括根据当前的视图或实际的元素显示类型有条件地显示。
Device | Code | Types | Range |
---|---|---|---|
Extra small | xs | small to large handset | < 600px |
Small | sm | small to medium tablet | 600px > < 960px |
Medium | md | large tablet to laptop | 960px > < 1264px* |
Large | lg | desktop | 1264px* > < 1904px* |
Extra large | xl | 4k and ultra-wides | > 1904px* |
* -16px on Desktop |
指定元素的 display
属性。这些类可以应用到所有从 xs
到 xl
的断点,并且没有特定的断点。
.d-{value}
forxs
.d-{breakpoint}-{value}
forsm
,md
,lg
andxl
value 属性可以为下列之一:
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex
为显示帮助类设置一个特定的断点时,它会应用到对应宽度及其更宽的屏幕比如,d-lg-flex
会应用到 lg
和 xl
大小的屏幕上。
根据当前 viewport 有条件地显示一个元素。断点功能类总是自下而上应用。这意味着如果你使用 .d-none
,它将适用于所有断点。然而 .d-md-none
只适用于 md
及以上。
Screen Size | Class |
---|---|
Hidden on all | .d-none |
Hidden only on xs | .d-none .d-sm-flex |
Hidden only on sm | .d-sm-none .d-md-flex |
Hidden only on md | .d-md-none .d-lg-flex |
Hidden only on lg | .d-lg-none .d-xl-flex |
Hidden only on xl | .d-xl-none |
Visible on all | .d-flex |
Visible only on xs | .d-flex .d-sm-none |
Visible only on sm | .d-none .d-sm-flex .d-md-none |
Visible only on md | .d-none .d-md-flex .d-lg-none |
Visible only on lg | .d-none .d-lg-flex .d-xl-none |
Visible only on xl | .d-none .d-xl-flex |
此外,你还可以使用横向显示助手类来显示基于当前 viewport 的元素。可以使用以下格式 hidden-{breakpoint}-{condition}
应用这些类
condition 适用于基于以下前置条件的类:
only
- 仅通过xl
断点将元素隐藏在xs
上and-down
- 在指定的断点处隐藏元素,并通过lg
断点向下隐藏sm
上的元素and-up
- 在指定的断点处隐藏元素,并通过lg
断点向上隐藏sm
上的元素
此外,media types 可以使用 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
打印功能类也可以与无打印显示功能组合。
Use the d-sr
utility classes to conditionally hide content on all devices except screen readers.
d-sr-only
visually hides elements but will still announce to screen readers.d-sr-only-focusable
visually hides an element until it is focused. This is useful when implementing skip links.
Caught a mistake or want to contribute to the documentation?
Edit Layout
on GitHub!