有一些 CSS 类可以开箱即用，用于实现常见的功能。
| 类名 | 描述 |
|---|---|
disabled | 光标更改为通知“禁用”，并且不透明度设置为较低的值。 |
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 | 将您的元素置于任何其他组件之上，但在弹出窗口、工具提示、通知之后。 |
z-max | 将您的元素置于任何其他组件之上（包括抽屉、模态框、通知、布局页眉/页脚等）。 |
窗口宽度相关
首先，让我们定义断点是什么
| 窗口大小 | 名称 | 最小宽度阈值（像素） | 最大宽度阈值（像素） |
|---|---|---|---|
| 超小 | xs | 0px | 599.99px |
| 小 | sm | 600px | 1023.99px |
| 中 | md | 1024px | 1439.99px |
| 大 | lg | 1440px | 1919.99px |
| 超大 | 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）。
提示
您可以将可见性类与 inline 类结合使用以进行内联块。
例如：<span class="gt-sm inline">...</span>
提示
如果您想根据 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 标签下时隐藏 |
提示
根据您的需求，您可能还想查看平台检测页面，了解如何使用 Javascript 实现相同的效果。后一种方法允许您甚至不渲染 DOM 元素或组件。当渲染过程代价高昂时，这很有用。
方向相关
| 类名 | 描述 |
|---|---|
orientation-portrait | 仅当屏幕方向为纵向时可见 |
orientation-landscape | 仅当屏幕方向为横向时可见 |
打印相关
| 类名 | 描述 |
|---|---|
print-only | 仅在打印媒体上可见 - 在屏幕媒体上隐藏 |
print-hide | 在屏幕媒体上可见 - 在打印媒体上隐藏 |