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

列印頁面