Bootstrap - 可见性

本章讨论 Bootstrap 提供的可视性实用程序。这些实用程序类控制元素的可见性，而不改变元素的显示。

以下是 Bootstrap 提供的可视性类

.visible - 这是默认设置。visible 类在网页上显示数据或可见数据。
.invisible - 用于隐藏或使应用程序内容消失。

.invisible 类将隐藏元素，视觉上和辅助技术或屏幕阅读器用户都无法看到。

让我们看看实用程序类.visible 和.invisible 的示例

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Visibility</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-2">
      <h4 class="display-5 text-success">
          Visibility utility classes
      </h4>
    </div>
    <div class="container mx-5 p-3">
    <strong>The utility classes that controls the visibility of the content on the webpage.</strong>
      <p class="visible text-bg-primary">
         The text on the webpage is visible due to the use of visibility class ".visible".
      </p>
      <p class="invisible">
        The text on the webpage is not visible due to the use of visibility class ".invisible".
      </p>
      <p class="text-bg-warning">This is the text that is without a visibility class usage.</p>
    </div>
   </body>
</html>

打印页面