Bootstrap 5 Видимость

Опубликовано: 18 Февраля, 2023

Bootstrap 5 регулирует видимость элемента без изменения отображаемого содержимого. Установите видимость элемента с помощью наших утилит видимости веб-страницы. Утилиты видимости не изменяют отображаемое значение и скрывают информацию от большинства пользователей, сохраняя ее для программ чтения с экрана. Это помогает появляться и исчезать необходимому контенту в соответствии с форматом.

Bootstrap 5 использует «видимый» или «невидимый» класс для видимости. Класс «видимый» показывает контент, а «невидимый» скрывает нужный контент.

Используемые классы видимости:

.visible: видимый класс показывает данные или видимые данные на веб-странице. Видимость по умолчанию установлена в веб-приложении.
.invisible: этот класс используется для скрытия или исчезновения содержимого приложения.

Синтаксис:

// Visible content of the web page
<div class = "visible"> content. </div>

// Invisible content of the web page
<div class = "invisible"> content. </div>

Пример 1: Вот пример видимого класса Bootstrap 5. Это настройка по умолчанию для отображаемого содержимого.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap visibility Example</title>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js">
    </script>
</head>
  
<body>
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <strong>Bootstrap 5 Visibility</strong>
    </div>
    <div class="container mt-4">
        <p class="visible bg-warning">
            Bootstrap 5 regulates element visibility 
            without changing display content.
            Set element visibility with our web page 
            visibility utilities. The visibility utilities
            do not change the display value and hide 
            information from most users while retaining 
            it for screen readers.
        </p>
    </div>
  
</body>
  
</html>

Выход:

Пример 2: Вот пример невидимого класса Bootstrap 5. Содержимое не отображается на веб-странице, но доступно на HTML-странице.

Выход:

Ссылка: https://getbootstrap.com/docs/5.0/utilities/visibility/

Technical Scripter Picked Bootstrap

Bootstrap 5 Видимость

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ