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. visibility
。These 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
元素仍会占用页面中的空间。
.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,
)
)