Bootstrap 简明教程

Bootstrap - Visibility

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

This chapter discusses about the visibilty utilities provided by Bootstrap. These utiltiy classes control the visibility of elements, without altering the display of the element.

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

Following are the visibility classes provided by Bootstrap:

  1. .visible - It is the default setting. The visible class shows data or visible data on the web page.

  2. .invisible - It is used to hide or disappear the content of the application.

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

Let us see an example for the utility classes .visible and .invisible:

Example

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

You can edit and try running this code using the *Edit & Run *option.

<!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>