Bootstrap 简明教程

Bootstrap - Visibility

本章讨论了 Bootstrap 提供的可见性实用工具。这些实用工具可控制元素的可见性，而无需对其显示进行任何更改。

以下是 Bootstrap 提供的可见性类：

  1. .visible - 这是默认设置。可见类显示网页上的内容或可见数据。

  2. .invisible - 用于隐藏或让应用程序的内容消失。

让我们来看 .visible 和 .invisible 实用工具的一个示例：

Example

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

<!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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/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>