Skip to main content Skip to docs navigation
View on GitHub

Visibility可见度

Control the visibility of elements, without modifying their display, with visibility utilities.使用可见性实用程序控制图元的可见性,而不修改其显示。

Set the visibility of elements with our visibility utilities. 使用可见性实用程序设置元素的visibilityThese utility classes do not modify the display value at all and do not affect layout – .invisible elements still take up space in the page.这些实用程序类根本不会修改display值,也不会影响布局。.invisible元素仍会占用页面中的空间。

Elements with the .invisible class will be hidden both visually and for assistive technology/screen reader users.具有.invisible类的元素将在视觉上和辅助技术/屏幕阅读器用户一起隐藏。

Apply .visible or .invisible as needed.根据需要应用.visible.invisible

<div class="visible">...</div>
<div class="invisible">...</div>
// Class
.visible {
visibility: visible !important;
}
.invisible {
visibility: hidden !important;
}

Sass

Utilities API实用程序API

Visibility utilities are declared in our utilities API in scss/_utilities.scss. 可见性实用程序在scss/_utilities.scss中的实用程序API中声明。Learn how to use the utilities API.了解如何使用实用程序API。

    "visibility": (
property: visibility,
class: null,
values: (
visible: visible,
invisible: hidden,
)
)