有一些 CSS 类可供你开箱即用，用于实现常用功能。
¥There are some CSS classes that you can use out of the box for common functionality.
| 类名 | 描述 |
|---|---|
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 | 将你的元素放置在任何其他组件之上，但位于弹出窗口、工具提示和通知之后。 |
z-max | 将你的元素放置在任何其他组件之上（包括抽屉、模态框、通知、布局页眉/页脚等）。 |
窗口宽度相关(Window Width Related)
¥Window Width Related
首先，让我们定义断点：
¥First of all, let’s define what the breakpoints are:
| 窗口大小 | 名称 | 最小宽度阈值（像素） | 最大宽度阈值（像素） |
|---|---|---|---|
| 超小 | xs | 0px | 599.99px |
| 小 | sm | 600 像素 | 1023.99px |
| Medium | md | 1024px | 1439.99px |
| 过大 | lg | 1440px | 1919.99px |
| 超大 | xl | 1920px | 无限 |
现在来看看与窗口宽度相关的 CSS 类。
¥Now on to the window width related CSS classes.
| 类名 | 描述 |
|---|---|
xs | 仅在超小窗口上显示 |
sm | 仅在小窗口上显示 |
md | 仅在中型窗口上显示 |
lg | 仅在大窗口上显示 |
xl | 仅在超大窗口上显示 |
你还可以显示一些小于指定尺寸的 DOM 元素或组件。大于其中一种大小的文件也相同。只需附加 lt- 或 gt- 前缀，这些前缀来自 “低于” 和 “大于”。示例：lt-md（仅在 xs 和 sm 上显示）、lt-xl（仅在 xs、sm、md 和 lg 窗口上显示）、gt-md（在大于中型窗口上显示）：lg 和 xl)。
¥You can also show some DOM element or component if it’s lower than one of the sizes. Same for greater than one of the sizes. Just attach lt- or gt- prefixes, which come from “lower than” and “greater than”. Example: lt-md (display on xs and sm only), lt-xl (display on xs, sm, md and lg windows only), gt-md (display on greater than medium windows: lg and xl).
提示
你可以将可见性类与 inline 类结合使用，用于内联块。
¥You can combine the visibility classes with the inline class for inline-blocks.
示例：<span class="gt-sm inline">...</span>
¥Example: <span class="gt-sm inline">...</span>
提示
例如，如果你想根据 JavaScript 属性显示或隐藏，则可以使用 屏幕插件。
¥If you want to e.g. show hide based on JavaScript properties, you can use the Screen Plugin.
平台相关(Platform Related)
¥Platform Related
仅在以下平台可见：
¥Visible only on:
| 类名 | 描述 |
|---|---|
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 标签下时才可见 |
隐藏位置：
¥Hide on:
| 类名 | 描述 |
|---|---|
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 元素或组件。当渲染过程开销较大时，它很有用。
¥Based on your needs, you might want to also check Platform Detection page to see how you can achieve the same effect using Javascript. This latter method allows you to not even render a DOM element or component. It is useful when the rendering process is expensive.
方向相关(Orientation Related)
¥Orientation Related
| 类名 | 描述 |
|---|---|
orientation-portrait | 仅当屏幕方向为纵向时才可见 |
orientation-landscape | 仅当屏幕方向为横向时才可见 |
打印相关(Printing Related)
¥Printing Related
| 类名 | 描述 |
|---|---|
print-only | 仅在印刷媒体上可见 - 在屏幕媒体上隐藏 |
print-hide | 在屏幕媒体上可见 - 在印刷媒体上隐藏 |