显示适用于从xs
到 xl
,的所有 breakpoints
的实用程序类,其中没有breakpoints
缩写。 这是因为这些类是从 min-width: 0;
并且因此不受媒体查询的限制。 然而,其余的断点包含断点缩写。
因此,这些类使用以下格式来命名:
.d-{value}
用于小屏幕适配(即手机适配).d-{breakpoint}-{value}
用于 sm
、md
、lg
、xl
等多设备适配。display常用属性:
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex
媒体查询效果屏幕宽度与给定的断点或更大。 例如,.d-lg-none sets display:none;
在lg
和xl
屏幕上。
屏幕规格 | 引用样式 |
---|---|
所有屏幕下隐藏 | .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 |
下面两个div空间在不同的屏幕下显示是不同的,请注意观察:
在处理打印样式时,通过display
通用样式来改变相应值处理呈现效果。
.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
屏幕与打印显示可以并列设置,下面有三段代码,请注意观察它们在不同屏幕大小的显示。