Bootstrap 5 Visibility: Управление видимостью элементов

Bootstrap 5 предоставляет удобные утилиты для контроля видимости элементов на веб-странице. Эти классы позволяют изменять видимость элементов без изменения их отображения и без влияния на компоновку страницы.

Основные классы видимости

visible

Класс .visible используется для отображения содержимого. Элементы с этим классом будут видны на веб-странице. По умолчанию, этот класс применяется к веб-приложению.

Пример:

<div class="visible">
    Этот текст будет виден
</div>

Результат:

Этот текст будет виден

invisible

Класс .invisible используется для скрытия содержимого. Элементы с этим классом остаются в документе, но не отображаются визуально. Это полезно, например, для контента, который должен появляться и исчезать по формату.

Пример:

<div class="invisible">
    Этот текст будет скрыт
</div>

Результат:

Этот текст будет скрыт

Примечания

Утилиты видимости не изменяют значение свойства display, поэтому они не влияют на компоновку страницы.
Элементы с классом .invisible скрыты как визуально, так и для пользователей с помощью технологий ассистивного чтения.

CSS

API утилит Sass

Утилиты видимости объявлены в API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.

scss/_utilities.scss

"visibility": (
  property: visibility,
  class: null,
  values: (
    visible: visible,
    invisible: hidden,
  )
),

Заключение

Теперь вы знакомы с основами управления видимостью в Bootstrap 5. Классы .visible и .invisible позволяют вам легко скрывать или отображать элементы на вашей странице, не влияя на компоновку. Помните, что правильное использование этих классов поможет сделать ваш интерфейс более гибким и удобным для пользователей. Успешной разработки!

На этой странице