CSS可见性

有一些CSS类可以用于常用功能。

类名说明
disabled游标更改为“disable”,不透明度设置为较低值。
hiddendisplay设置为none。与下面的类相比 - hidden类意味着元素不会显示并且不会占用布局中的空间。
invisiblevisibility设置为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 Smallxs0px599.99px
Smallsm600px1023.99px
Mediummd1024px1439.99px
Largelg1440px1919.99px
Extra Largexl1920px无穷大

窗口宽度相关的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屏幕媒体上可见 - 在打印媒体隐藏