CSS可见性
有一些CSS类可以用于常用功能。
| 类名 | 说明 |
|---|---|
disabled | 游标更改为“disable”，不透明度设置为较低值。 |
hidden | 将display设置为none。与下面的类相比 - hidden类意味着元素不会显示并且不会占用布局中的空间。 |
invisible | 将visibility设置为hidden。与上面的类相比，invisible类意味着元素不会显示，但它仍然占用布局空间。 |
transparent | 背景颜色是透明的。 |
dimmed | 在您的元素上应用深色透明覆盖层。不要使用在已经有**:after**伪元素的元素。 |
light-dimmed | 在您的元素上应用白色透明覆盖层。不要使用在已经有**:after**伪元素的元素。 |
ellipsis | 截取文本并在没有足够的可用空间时显示省略号。 |
ellipsis-2-lines | 当两行中没有足够的可用空间时，截断文本并显示省略号（仅适用于Webkit浏览器）。 |
ellipsis-3-lines | 当三行中没有足够的可用空间时，截断文本并显示省略号（仅适用于Webkit浏览器）。 |
z-top | 将元素定位在任何其他组件的顶部，但位于Popovers、提示框、通知框之后。 |
z-max | 将元素定位在任何其他组件（包括Drawer，Modals，Notifications，Layout header/footer…）之上 |
窗口宽度相关
首先，让我们定义断点是什么：
| 窗口大小 | 名称 | 最小宽度阈值（以像素为单位） | 最大宽度阈值（以像素为单位） |
|---|---|---|---|
| Extra Small | xs | 0px | 599.99px |
| Small | sm | 600px | 1023.99px |
| Medium | md | 1024px | 1439.99px |
| Large | lg | 1440px | 1919.99px |
| Extra Large | xl | 1920px | 无穷大 |
窗口宽度相关的CSS类。
| 类名 | 说明 |
|---|---|
xs | 仅在特小窗口上显示 |
sm | 仅在小窗口上显示 |
md | 仅在中等大小的窗口上显示 |
lg | 仅在大窗口上显示 |
xl | 仅在特大窗口上显示 |
如果它低于其中一个尺寸并且大于其中一个尺寸, 您仍然可以显示某些DOM元素或组件。 只需附加来自“低于”和“大于”的前缀lt- 或 gt-。例如：lt-md（仅在xs和sm上显示），lt-xl（仅在xs，sm，md和lg窗口中显示），gt-md（大于中等窗口的显示：lg和xl）。
TIP
对于内置块，您可以和可见性类inline结合使用。
例子: <span class="gt-sm inline">...</span>
TIP
如果你想根据JavaScript属性显示隐藏，可以使用屏幕插件。
平台相关
仅在以下位置可见：
| 类名 | 说明 |
|---|---|
desktop-only | 仅在桌面上可见 |
mobile-only | 仅在移动设备上可见 |
native-mobile-only | 仅在Cordova/Capacitor上可见 |
cordova-only | 仅在Cordova包装的应用上可见 |
capacitor-only | 仅在Capacitor包装的应用上可见 |
electron-only | 仅在Electron包装的应用上可见 |
touch-only | 仅在具有触摸功能的平台上可见 |
platform-ios-only | 仅在iOS平台上可见 |
platform-android-only | 仅在Android平台上可见 |
within-iframe-only | 仅当整个网站在IFRAME标记下时才可见 |
在以下位置隐藏：
| 类名 | 说明 |
|---|---|
desktop-hide | 在桌面上隐藏 |
mobile-hide | 在手机上隐藏 |
native-mobile-hide | 在Cordova/Capacitor上隐藏 |
cordova-hide | 在Cordova包装的应用上隐藏 |
capacitor-hide | 在Capacitor包装的应用上隐藏 |
electron-hide | 在Electron包装的应用上隐藏 |
touch-hide | 在支持触摸的平台上隐藏 |
platform-ios-hide | 在iOS平台上隐藏 |
platform-android-hide | 在Android平台上隐藏 |
within-iframe-hide | 仅当整个网站位于IFRAME标记下时才隐藏 |
TIP
根据您的需要，您可能还需要查看平台检测页面，了解如何使用Javascript实现相同的效果。后一种方法允许您甚至不渲染DOM元素或组件。当渲染过程昂贵时它非常有用。
方向相关
| 类名 | 说明 |
|---|---|
orientation-portrait | 仅当屏幕方向为纵向时才可见 |
orientation-landscape | 仅当屏幕方向为横向时才可见 |
打印相关
| 类名 | 说明 |
|---|---|
print-only | 仅在打印媒体上可见 - 在屏幕媒体隐藏 |
print-hide | 屏幕媒体上可见 - 在打印媒体隐藏 |