Bootstrap - 可见性

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

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

  • .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/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>